19.3.2 选择器root、not、empty和target

在介绍完了CSS中的伪类选择器与伪元素选择器之后，让我们来看一下CSS 3中的结构性伪类选择器。结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。
首先，我们来看4个最基本的结构性伪类选择器—root选择器、not选择器、empty选择器与target选择器。

1.root选择器

root选择器将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的“”部分。
代码清单19-8为一个HTML页面，在该页面中，有一段文章，并且有一个文章的标题。

针对这个网页，使用如下所示的root选择器来指定整个网页的背景色为黄色，将网页中body元素的背景色设为绿色。

background-color: yellow;

}
body{

background-color: limegreen;

}

使用了root选择器后的运行结果如图19-10所示。

另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件背景色的显示范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面就全部变成绿色的了。

background-color: limegreen;

}

删除root选择器后的页面如图19-11所示。

2.not选择器
如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

譬如针对代码清单19-8所示的HTML页面，我们可以使用“body ”语句来指定body元素的背景色为黄色，但是使用“:not(h1)”语句中使用的not选择器排除h1元素，代码如下所示。

background-color: yellow;

}

使用not选择器后的运行结果如图19-12所示。

3.empty选择器

使用empty选择器来指定当元素中内容为空白时使用的样式。例如，在代码清单13-9所示的HTML页面中，有一个表格。可以使用empty选择器来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。

使用empty选择器后的运行结果如图19-13所示。

4.target选择器

使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
接下来我们来看一个target选择器的使用示例。页面中包含几个div元素，每个div元素都存在一个书签，当用户点击了页面中的超链接跳转到该div元素时，该div元素使用target选择器中指定的样式，在target选择器中，指定该div元素的背景色变为黄色。其中指定target选择器时的代码如下所示。
target{

background-color: yellow;

}
该示例的详细代码如代码清单19-10所示。

使用target选择器后的运行结果如图19-14所示。

19.3.3 选择器：first-child、last-child、nth-child和nth-last-child

本节介绍first-child选择器、last-child选择器、nth-child选择器与nth-last-child选择器。利用这几个选择器，能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。

1.单独指定第一个子元素、最后一个子元素的样式
接下来，让我们看一个示例。该示例对ul列表中的li列表项目进行样式的指定，在样式中对第一个列表项目与最后一个列表项目分别指定不同的背景色。

如果要对第一个列表项目与最后一个列表项目分别指定不同的背景色，目前为止采取的做法都是：分别给这两个列表项目加上class属性，然后对这两个class使用不同的样式，在两个样式中分别指定不同的背景色。但是，如果使用first-child选择器与last-child选择器，这个多余的class属性就不需要了。

接下来，我们在代码清单19-11中看一下如何使用first-child选择器与last-child选择器将第一个列表项目的背景色指定为黄色，将最后一个列表项目的背景色设定为浅蓝色。

这段代码的运行结果如图19-15所示。

另外，如果页面中具有多个ul列表，则该first-child选择器与last-child选择器对所有ul列表都适用，如代码清单19-12所示。

这段代码的运行结果如图19-16所示。

另外，first-child选择器在CSS 2中就已存在，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，从IE7开始被IE浏览器所支持。

Last-child选择器从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有获得IE浏览器的支持。

2.对指定序号的子元素使用样式

如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。这两个选择器是first-child及last-child的扩展选择器。这两个选择器的样式指定方法如下所示。
nth-child(n){
//指定样式
}
<子元素>：nth-last-child(n){
//指定样式
}
将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child(3)”表示第三个子元素，“nth-last-child(3)”表示倒数第三个子元素。
在代码清单19-13 中，我们给出一个使用这两个选择器的示例，在该示例中，指定ul列表中第二个li列表项目的背景色为黄色，倒数第二个列表项目的背景色为浅蓝色。

这段代码的运行结果如图19-17所示。

另外，这两个选择器都是从CSS 3开始被提供，目前为止被Firefox、Safari、Google Chrome、Opera浏览器所支持，到IE 8为止还没有受到IE浏览器的支持。

1. 对所有第奇数个子元素或第偶数个子元素使用样式
   除了对指定序号的子元素使用样式以外，nth-child选择器与nth-last-child选择器还可以用来对某个父元素中所有第奇数个子元素或第偶数个子元素使用样式。使用方法如下所示。

nth-child(odd){
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式
}
//所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(odd){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式
}
接下来，我们在代码清单19-14中看一个使用nth-child选择器来分别针对ul列表的第奇数个列表项目与第偶数个列表项目指定不同背景色的示例。在该示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。

这段代码的运行结果如图19-18所示。

另外，使用nth-child选择器与nth-last-child选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题，在19.3.4节中，我们将阐述会产生哪些问题，以及怎么解决这些问题。