19.3.3 选择器：first-child、last-child、nth-child和nth-last-child（2）
这段代码的运行结果如图19-16所示。
图19-16 具有多个列表时first-child
选择器与last-child选择器使用示例
另外，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-13 nth-child选择器与nth-last-child选择器使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style type="text/css">
li:nth-child（2）{
background-color: yellow;
}
li:nth-last-child（2）{
background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
这段代码的运行结果如图19-17所示。
图19-17 nth-child选择器于nth-last-child选择器使用示例
相关HTML 5与CSS 3权威指南：选择器（2）