CSS与（X）HTML的文档结构紧密相连，通过选择器（selector）来控制页面的表现。文档结构在CSS的应用以及行为层（如使用JavaScript控制元素行为）中都起着至关重要的作用。
将（X）HTML文档视为一个家族树，其中根元素是唯一的祖先，其他元素则依次向下排列。以一个典型的XHTML代码为例，其文档结构树如同图4-1所示。
代码示例：
```html
文档结构与选择器 -
<p></head></p>
<p><body></p>
<p><h1>第3章 <em>CSS入门</em></h1></p>
<acronym title="Cascading Style Sheets，层叠样式表">CSS</acronym>是一种标记性语言。
<p><!-- 省略其他代码 --></p>
<p></html></p>
<p>```</p>
<p>在家族树中，CSS的大部分能力基于元素的“父子”关系。如果一个元素A包含了元素B，那么元素A是“父元素”，被包含的元素B是“子元素”。每个元素都是另一个元素的“父”或“子”，或两者兼是。例如`<body>`是`<html>`的子元素，同时也是`<h1>`的父元素。父子元素在家族树中是相连的，并且父元素位于子元素的上一层。</p>
<p>这种“父子”关系有时被一般化为“祖先（或称前辈）”和“后代（或称子孙）”。如果一个元素到另一个元素中间跨越了一层或更多层，那么就构成了“祖先/后代”关系。例如，在图4-1中，`<html>`是`<h1>`的祖先，而`<body>`是所有浏览器能显示的元素的祖先，同时也是所有元素的根元素（root）。</p>
<p>有着相同父元素的元素之间被称为“兄弟”关系。例如，在图4-1中，`<h1>`和`<ol>`是兄弟关系，它们的共同父元素是`<body>`。同样，`<ul>`里的三个`<li>`元素也互相是兄弟关系。</p>
<p>掌握文档结构的意义非常重要，因为许多选择器都是基于文档结构的匹配。通过理解和运用这些关系，开发者可以更精确地控制页面上的样式和行为。</p>
<p>提示：在使用选择器时，了解并熟悉HTML文档结构是至关重要的一步，因为许多CSS选择器都是根据文档结构来匹配的。这使得开发者能够通过选择器精确地定位并控制页面上的特定元素。</p> </div>
<script>cambrian.render('body')</script>
<dfn ifdisplay dropzone='e3v1h9'></dfn><sup ifdisplay dir='e5pum6'></sup><time ifdisplay lang='f3m55x'></time><div class="WDXJDFzEFQwBFAq imoney">
</div>
<area ifdisplay dir='lme9fh'></area><dfn ifdisplay id='fgjg4c'></dfn><small ifdisplay dropzone='4b5ujg'></small><div class="YLTKQjzamvkb9WV nextlog"> 上一篇：<a href='/wangzhan/527633.html'>破解PCAnyWhere远程连接的密码</a>
下一篇：没有了 </div>
<var ifdisplay name='0nddw9'></var><time ifdisplay date-time='p7vjvy'></time><dfn ifdisplay lang='bekcby'></dfn><div class="HmXbNjSNky0bb6P link-box">
<h3>网站设计</h3>
<ul class="biSe4IXTYeMwaU1 ullist4">
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527636.html" title="CSS入门 XHTML文档结构树">CSS入门 XHTML文档结构树</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527633.html" title="破解PCAnyWhere远程连接的密码">破解PCAnyWhere远程连接的密码</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527631.html" title="微店怎么发布产品-微店上架产品流程">微店怎么发布产品-微店上架产品流程</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527615.html" title="cad怎么使用厨具通插件将厨房设计平面图转成效">cad怎么使用厨具通插件将厨房设计平面图转成效</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527613.html" title="使用3D MAX2011中的面片建模的方法完成头盔建模制">使用3D MAX2011中的面片建模的方法完成头盔建模制</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527608.html" title="Surface Laptop 3笔记本值得买吗 微软Surface Laptop 3简">Surface Laptop 3笔记本值得买吗 微软Surface Laptop 3简</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527604.html" title="最新win2003 II6解析漏洞实战及应用">最新win2003 II6解析漏洞实战及应用</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527599.html" title="Flash基础教程 动画基础知识">Flash基础教程 动画基础知识</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527596.html" title="下载百度文库的文章 下载百度文库的方法">下载百度文库的文章 下载百度文库的方法</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527595.html" title="3Dmax怎么快速建模圆锥体模型-">3Dmax怎么快速建模圆锥体模型-</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527584.html" title="css position 设置元素的定位方式详解">css position 设置元素的定位方式详解</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527582.html" title="xp系统下160wifi无法开启热点解决办法">xp系统下160wifi无法开启热点解决办法</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527580.html" title="html css 控制div或者table等固定在指定位置的实现方">html css 控制div或者table等固定在指定位置的实现方</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527579.html" title="CSS教程-网页表单设计技巧">CSS教程-网页表单设计技巧</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527571.html" title="Win10 1909开机黑屏怎么办？Win10 1909开机黑屏两种解">Win10 1909开机黑屏怎么办？Win10 1909开机黑屏两种解</a></li>
<li><i class="EOwbv2uNFsDfMmr fa fa-caret-right"></i><a href="/wangzhan/527569.html" title="520快来了你懂的 ZOMO猫爪键帽三件套上手评测揭晓">520快来了你懂的 ZOMO猫爪键帽三件套上手评测揭晓</a></li>
</ul>
</div>
<time ifdisplay id='4cbtyg'></time><ins ifdisplay lang='qx298e'></ins><map ifdisplay lang='2qbbc9'></map><div id="pagenavi"> </div>
</div>
</div>
<ul id="sidebar">
<li class="1BbpzKKpl6kFPOV diyarea">
<script src='/plus/ad_js.php?aid=3' language='javascript'></script> </li>
<li class="BUnfIlKUqO403iK rlist1">
<h3><span>金源码搜索</span></h3>
<map ifdisplay dropzone='nhffbq'></map><sup ifdisplay dropzone='cjwbdo'></sup><dfn ifdisplay lang='ib66cc'></dfn><div id="logsearch">
<form name="keyform" method="get" action="/plus/search.php">
<input type="hidden" name="pagesize" value="20">
<input name="q" class="8o5rDYWAmZx0rf8 search" type="text" />
<i class="S3Uj4hLucVcPaQi fa fa-search" onclick="$('form').submit()"></i>
</form>
</div>
</li>
<li id="blogsort">
<h3 class="2ow6tk2NdMdZeZJ mcolor"><i class="oIQdr05im0CBv1S fa fa-folder-open-o"></i><span>金源码导航</span></h3>
</li>
<li class="DqBecCFeZzuw6QD rlist1">
<h3><span>免费网站源码</span></h3>
<ul id="newlog">
<li><a href="/wangzhan/527636.html">CSS入门 XHTML文档结构树</a></li>
<li><a href="/wangzhan/527633.html">破解PCAnyWhere远程连接的密码</a></li>
<li><a href="/wangzhan/527631.html">微店怎么发布产品-微店上架产品流程</a></li>
<li><a href="/wangzhan/527615.html">cad怎么使用厨具通插件将厨房设计平面图转成效</a></li>
<li><a href="/wangzhan/527613.html">使用3D MAX2011中的面片建模的方法完成头盔建模制</a></li>
</ul>
</li>
<li class="E6UQD9cX5jBuIgO rlist1">
<h3><span>网站模板下载</span></h3>
<ul id="hotlog">
<li><i class='nRZkgbxxzjFxqiX mcolor' >1</i><a href="/wangzhan/244607.html">败笔网络安全技术</a></li>
<li><i class='nRZkgbxxzjFxqiX mcolor' >2</i><a href="/wangzhan/241010.html">南宁企业建站</a></li>
<li><i class='nRZkgbxxzjFxqiX mcolor' >3</i><a href="/wangzhan/248423.html">网络安全第五空间</a></li>
<li><i >4</i><a href="/wangzhan/248615.html">网页设计制作详细流程</a></li>
<li><i >5</i><a href="/wangzhan/248030.html">哪个云服务器好</a></li>
</ul>
</li>
<li class="MpyG4TGI2dVCqrK rlist1">
<h3><span>网站建设</span></h3>
<ul id="randlog">
<div id='tag6fd02434c442d77d83a4a9d2b9cfeeaa'>
<li><a href="/wangzhan/497366.html">纯css写的评分鼠标移入的效果附图</a></li>
<li><a href="/wangzhan/223902.html">微信炸群封停3千多个微信号</a></li>
<li><a href="/wangzhan/509679.html">小米笔记本更多内幕曝光-售价折合人民币约300</a></li>
<li><a href="/wangzhan/527298.html">CSS实现背景图尺寸不随浏览器缩放而变化的两种</a></li>
<li><a href="/wangzhan/48113.html">美团网站的数据搜索排序解决方案精华分享</a></li>
</div>
</ul>
</li>
</ul>
</div>
</div>
<ins ifdisplay date-time='1xatzx'></ins><bdo ifdisplay dir='2bn9uw'></bdo><bdo ifdisplay date-time='0eu185'></bdo><div id="footerbar">
<sup ifdisplay id='yhjsw4'></sup><embed ifdisplay lang='8ynuby'></embed><map ifdisplay dir='q64a9m'></map><div class="KvrG50VJgrTHb5j wrap">
<p>Copyright © 2016-2025 www.dzhlxh.cn <a href="http://www.dzhlxh.cn/" target="_blank">金源码</a> 版权所有 Power by </p>
<p>网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板</p>
</div>
<embed ifdisplay dir='hxkrev'></embed><small ifdisplay name='n43bvk'></small><ins ifdisplay lang='azlibz'></ins><div id="backtop"><span class="A9kzXKcQeidDLBF fa fa-space-shuttle fa-rotate-270"></span></div>
</body>
</html> 