《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.3.3　选择器first-child、last-child、n

16.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属性就不需要了。

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

代码清单16-11　first-child选择器与last-child选择器使用示例

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

图16-15　first-child选择器与last-child选择器使用示例

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

代码清单16-12　具有多个列表时first-child选择器与last-child选择器使用示例

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

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

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

图16-16　具有多个列表时first-child选择器与last-child选择器使用示例

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)”表示倒数第三个子元素。

在代码清单16-13中，我们给出一个使用这两个选择器的示例，在该示例中，指定ul列表中第二个li列表项目的背景色为黄色，倒数第二个列表项目的背景色为浅蓝色。

代码清单16-13　nth-child选择器与nth-last-child选择器使用示例

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

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

3.对所有第奇数个子元素或第偶数个子元素使用样式

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

nth-child(odd){

// 指定样式

}

// 所有正数下来的第偶数个子元素

<子元素>:nth-child(even){

// 指定样式

}

// 所有倒数上去的第奇数个子元素

<子元素>:nth-last-child(odd){

// 指定样式

}

// 所有倒数上去的第偶数个子元素

<子元素>:nth-last-child(even){

// 指定样式

}

接下来，我们在代码清单16-14中看一个使用nth-child选择器来分别针对ul列表的第奇数个列表项目与第偶数个列表项目指定不同背景色的示例。在该示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。

代码清单16-14　使用nth-child对第奇数个、第偶数个子元素使用不同样式示例

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

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