如何使用树型结构理解html文档结构

CSS的功能十分强大，因为要使用html文档的结构来确定适当的样式，并确定该如何应用这些样式。在确定以何种方式向文档应用样式时，结构还承担这更重要的角色。
理解元素父子关系，首相要理解选择器和文档之间的关系，其次要分析文档的结构。如下html文档：

css之所以强大，主要在于元素之间存在父子关系。html文档以元素的一种层次结构为基础，每个元素在整个文档中都有自己的一个位置。同时既可以作为一个父元素，又可作为另一个元素的子元素。这也就是数据结构中，非线性结构树有多个后继，唯一前驱。如下图所展示的树型结构：

在树型图中：如果一个元素到另一个元素的路径上经过两层或多层，这些元素则有祖先-后代关系，而不是父子关系（当然，子元素也是后代，父元素也是祖先。）

body元素是浏览器默认显示的所有元素的祖先，html元素则是整个文档的祖先。

理解上述文档结构后，第一个好处是可以定义后代选择器，也称包含选择器或上下文选择器。第二个好处是定义伪类选择器。