2.3 层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
2.3.1 层次选择器语法
层次选择器是一个非常好的选择器，也是大家常用的选择器，其详细说明如表2-3所示。
表2-3 层次选择器语法
选择器 类型 功能描述
E F 后代选择器（包含选择器） 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E > F 子选择器 选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素
E + F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E ～ F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
2.3.2 浏览器兼容性
浏览器的兼容性如表2-4所示。从表中可以看出，子选择器、相邻兄弟选择器和通用兄弟选择器要IE 7以及其以上版本才支持，随着IE 6的慢慢消失，层次选择可以放心使用。
2.3.3 实战体验：使用层次选择器选择元素
在层次选择器中，后代选择器与子选择器是比较常用的，而对于相邻兄弟选择器和通用兄弟选择器而言，平时大家并不常使用，特别是CSS3选择器中新增的通用兄弟选择器。下面通过示例来演示各种层次选择器在页面中如何选择HTML的DOM元素的方法。
页面中有10个div元素，其中第四个div中包含了2个div，另外第七个div包含了第八个，而第八个div又包含了第九个div，并且第九个div包含了第十个div。下面通过层次选择器来改变div的样式风格。
新创建一个HTML文件 2-2.html，代码如下。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
在具体使用层选择器之前，先来看看页面的初步效果，如图2-8所示。
为了更好地理清这些div的层次关系，可以先将示例中的body部分画一个DOM树形草图，如图2-9所示。
图2-9 body的树形结构
2.3.4 后代选择器
后代选择器（E F）也称为包含选择器，作用就是可以选择某元素的后代元素。例如“E F”，E为祖先元素，F为后代元素，表达的意思就是选择E元素的所有后代F元素。这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论F在E中有多少层级关系，F元素都将被选中。接下来使用后代选择器来改变其背景色。
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
一起来看使用后代选择器改变了哪几个div的背景色，如图2-10所示。
图2-10 使用后代选择器的效果
注
意 后代选择器两选择符之间必须以空格隔开，中间不能有任何其他符号插入。
2.3.5 子选择器
子选择器（E > F）只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F表示选择了E元素下所有子元素F。这与后代选择器（E F）不一样，在后代选择器中F是E的后代元素，而在E>F中F仅仅是E的子元素而已。接下来通过例子，选择器改变body下的子元素div的背景色。
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
通过上面子选择器的运用，你能猜出body的10个div中，哪几个背景色将变成绿色呢？来看图2-11的效果。
图2-11 使用子选择器的效果
2.3.6 相邻兄弟选择器
相邻兄弟选择器（E + F）可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻，这样就可以使用相邻兄弟选择器来选择F元素。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
.active + div {background: lime;}
</style>
</head>
<body>
<div class="active">1</div>
<!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
此时第二个div的背景色将变成“lime”色，如图2-12所示。
2.3.7 通用兄弟选择器
通用兄弟选择器（E～F）是CSS3新增加的，用于选择某元素后面的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说，E和F元素都是同辈元素，并且F元素在E元素之后，E～F将选中E元素后面的所有F元素。如下面的代码所示。
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body > div {background: green;}
.active + div {background: lime;}
.active ～ div {background: red;}
这样，只要是div.active的兄弟元素div，并且在div.active之后，其背景色将变成红色，如图2-13所示。
注
意 通用兄弟选择器选中的是与E元素相邻的后面兄弟元素F，其选中的是一个或多个元素；而相邻兄弟选择器选中的仅是与E元素相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。
相关资源：CSS3层次选择器实例