分享程序员开发的那些事...
更新时间：2022-10-07 19:27:07
本节书摘来自华章社区《图解CSS3：核心技术与案例实战》一书中的第2章，第2.3节层次选择器，作者 大漠，更多章节内容可以访问云栖社区“华章社区”公众号查看
2.3 层次选择器
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。
2.3.1 层次选择器语法
层次选择器是一个非常好的选择器，也是大家常用的选择器，其详细说明如表2-3所示。
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.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.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.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所示。