CSS与（X）HTML的文档结构紧密相连，通过相应的选择器（selector）实现对页面表现的精细控制。文档结构在Web开发中扮演着至关重要的角色，不仅在CSS的应用中，而且在行为层如JavaScript控制元素行为时也同样重要。

我们可以将（X）HTML文档视为一个家族树，其结构清晰，层次分明。这个树的根元素是唯一的祖先，向下依次展开，形成了整个页面的结构。

以一段XHTML代码为例，其文档结构树如图4-1所示。这段代码中包含了HTML、HEAD、BODY等元素，它们按照家族树的形式组织在一起。

在家族树中，CSS的能力大多基于元素的“父子”关系。如果一个元素A包含了元素B，那么元素A就是元素B的“父元素”，而元素B则是元素A的“子元素”。这种关系在CSS选择器中非常重要，因为许多选择器都是基于文档结构来匹配的。

例如，在图4-1中，元素是

元素的祖先，而元素则是所有浏览器能显示的元素的祖先，也被称为“根元素”。有着相同父元素的元素之间互为“兄弟”关系。

掌握文档结构对于理解CSS选择器至关重要。CSS通过与（X）HTML的文档结构相对应的选择器来达到控制页面表现的目的。这些选择器可以精确地定位到页面中的特定元素，从而实现对页面样式的精确控制。

文档结构不仅在CSS中有重要意义，在JavaScript等行为层也同样重要。因为JavaScript也是基于文档结构来操作元素的，所以掌握文档结构对于Web开发来说是非常必要的。

深入理解并熟练掌握（X）HTML文档结构，无论是对于CSS还是JavaScript等技术的应用，都是至关重要的。只有充分理解了文档结构，才能更有效地利用CSS和JavaScript等技术来创建出功能丰富、样式精美的网页。