使用nth-child选择器和nth-last-child选择器不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还以针对父元素中某个指定序列号的子元素来指定样式。aB6HTML5中文学习网 - HTML5先行者学习网

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

aB6HTML5中文学习网 - HTML5先行者学习网

实现指定序号的子元素使用样式CSS代码：aB6HTML5中文学习网 - HTML5先行者学习网

li:nth-child(1) { background:#0457b5;color:#fff; }li:nth-last-child(1) { background:#75b504; color:#fff; }

本篇文章实例中用到的HTML代码：aB6HTML5中文学习网 - HTML5先行者学习网

<ul>  <li>项目列表1</li>  <li>项目列表2</li>  <li>项目列表3</li>  <li>项目列表4</li></ul>

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

除了对指定序列号的子元素使用样式以外，nth-child选择器还可以用来指定对某个父元素中的所有奇数子元素或者偶数子元素使用样式。aB6HTML5中文学习网 - HTML5先行者学习网

aB6HTML5中文学习网 - HTML5先行者学习网

所有第奇数个子元素或偶数个子元素使用样式CSS代码：aB6HTML5中文学习网 - HTML5先行者学习网

li:nth-child(odd) { background:#ffb10a; color:#fff; }li:nth-child(even) { background:#75b504; color:#fff; }