2.6 CSS的层次选择符
层次选择符通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
2.6.1 后代选择符
后代选择符也称为包含选择符，作用就是可以选择某个元素的后代元素，如“X Y”，X为祖先元素，Y为后代元素，X Y表示选择X元素中所包含的所有Y元素。这里的Y元素不管是X元素的子元素、孙辈元素，还是与X元素有更深层次的关系，都将被选中。换句话说，不论Y在X中有多少层级关系，Y元素都将被选中。
技能案例：使用后代选择符定义样式
源文件：源文件\第2章\2-6-1.html
（1）新建HTML文档，创建style标签，在style标签中定义如下的CSS样式：
（2）对<h1>标签中所包含的<span>标签进行样式设置，代码如下：
（3）图2-13所示为案例的完整代码，图2-14所示为在浏览器中预览的页面效果。
图2-13 案例的完整代码
图2-14 在浏览器中预览的页面效果
<h1>标签中的所有<span>标签将被应用font-weight:bold的样式设置，需注意的是，仅对有此结构的标签有效，对于单独存在的<h1>标签或单独存在的<span>标签，以及其他非<h1>标签包含的<span>标签均无效。
这样做能帮助避免过多的id及class的设置，可以直接对需要设置的元素进行设置。
2.6.2 子选择符
子选择符只能选择某元素的子元素，如“X > Y”，X为父元素，Y为子元素， X > Y表示选择X元素中包含的所有Y元素。
子选择符与后代选择符不同，在后代选择符中，Y是X的后代元素，无论有多少层级关系Y元素都会被选中，而在子选择符中Y仅是X的子元素。
2.6.3 相邻兄弟选择符
相邻兄弟选择符可以选择某个元素之后与其相邻的元素，它们具有一个相同的父元素。换句话说，X和Y是同辈元素，Y元素在X元素的后面，并且X和Y元素相邻，这样就可以使用相邻兄弟选择符来选择Y元素。
技能案例：使用相邻兄弟选择符设置样式
源文件：源文件\第2章\2-6-3.html
（1）新建一个HTML文档，在<body>标签中输入如下的HTML代码：
（2）如果需要定义应用了类名称active的<li>标签之后紧邻的<li>标签的样式，就可以使用相邻兄弟选择符。在style标签中，定义如下的样式：
（3）通过该相邻兄弟选择符设置样式，可以使应用了类名称active的<li>标签之后紧邻的<li>标签显示所定义的样式效果。图2-15所示为案例的完整代码，图2-16所示为在浏览器中预览的页面效果。
图2-15 案例的完整代码
图2-16 在浏览器中预览的页面效果
2.6.4 通用兄弟选择符
通用兄弟选择符是CSS中的一种用于选择某个元素之后的所有兄弟元素的选择符，其与相邻兄弟选择符类似，它们需要在同一个父元素之中。也就是说，X和Y是同辈元素，并且Y元素在X元素之后，通用兄弟选择符可以选择X元素之后的所有Y元素。
技能案例：使用通用兄弟选择符定义样式
源文件：源文件\第2章\2-6-4.html
（1）新建一个HTML文档，在<body>标签中输入如下的HTML代码：
（2）如果需要定义应用了类名称active的<li>标签之后所有的<li>标签的样式，就可以使用通用兄弟选择符，样式设置如下：
（3）通过该通用兄弟选择符设置样式，可以使应用了类名称active的<li>标签之后所有在同一父元素中的<li>标签显示所定义的样式效果。图2-17所示为案例的完整代码，图2-18所示为在浏览器中预览的页面效果。
图2-17 案例的完整代码
图2-18 在浏览器中预览的页面效果
2.6.5 层次选择符浏览器适配
层次选择符的浏览器兼容性如表2-4所示。
表2-4 层次选择符的浏览器兼容性
