《图解CSS3：核心技术与案例实战》——2.3节层次选择器

xiaoxiao2023-08-19 147

本节书摘来自华章社区《图解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>  <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所示。