4.3 层次选择器

层次选择器是通过html的DOM元素间的层次关系获取元素，主要层次关系有后代、父子、相邻兄弟和通用兄弟。

4.3.1 包含选择器

包含选择器又叫后代选择器，作用的是选择元素的后代元素，包括子元素、子元素的子元素等，以此类推。包含选择器与子元素选择器之间使用空格来表示关系。假如给<div>元素中的<p>元素添加黄色背景，就可以使用后代选择器。

【例4-4】（实例文件：ch04\Chap4.4.html）包含选择器。

相关的代码实例请参考Chap4.4.html文件，在IE浏览器中运行的结果如图4-7所示。

4.3.2 子选择器

子选择器用来选择一个父元素直接的子元素，不包括子元素的子元素，它的符号为大于号“>”，请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代；而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择。

【例4-5】（实例文件：ch04\Chap4.5.html）子选择器。

相关的代码实例请参考Chap4.5html文件，在IE浏览器中运行的结果如图4-8所示。

4.3.3 CSS 3新增的兄弟选择器

兄弟选择器用来设置某个选择器兄弟元素的样式。兄弟选择器有两种方式，一种是选择元素后面一个兄弟元素，用“+”连接选择器；另一种是选择元素后面同一类指定的兄弟元素，用“～”连接选择器。

【例4-6】（实例文件：ch04\Chap4.6.html）兄弟选择器。

相关的代码实例请参考Chap4.6.html文件，在IE浏览器中运行的结果如图4-9所示。