19.3.3 选择器：first-child、last-child、nth-child和nth-last-child（3）
另外，这两个选择器都是从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）{
//指定样式
}
接下来，我们在代码清单19-14中看一个使用nth-child选择器来分别针对ul列表的第奇数个列表项目与第偶数个列表项目指定不同背景色的示例。在该示例中将所有第奇数个列表项目的背景色设为黄色，将所有第偶数个列表项目的背景色设为浅蓝色。
代码清单19-14 使用nth-child对第奇数个、第偶数个子元素使用不同样式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>使用nth-child对第奇数个、第偶数个子元素使用不同样式示例</title>
<style type="text/css">
li:nth-child（odd）{
background-color: yellow;
}
li:nth-child（even）{
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-18所示。
图19-18 使用nth-child对技术哥、第偶数个子元素使用不同样式示例
另外，使用nth-child选择器与nth-last-child选择器时，虽然在对列表项目使用时没有问题，但是当用于其他元素时，还是会出现问题，在19.3.4节中，我们将阐述会产生哪些问题，以及怎么解决这些问题。
相关HTML 5与CSS 3权威指南：选择器（3）