使用nth-child选择器和nth-last-child选择器不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式,还以针对父元素中某个指定序列号的子元素来指定样式。
对指定序号的子元素使用样式
实现指定序号的子元素使用样式CSS代码:
li:nth-child(1) { background:#0457b5;color:#fff; } li:nth-last-child(1) { background:#75b504; color:#fff; }
本篇文章实例中用到的HTML代码:
<ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> <li>项目列表4</li> </ul>
对所有第奇数个子元素或偶数个子元素使用样式
除了对指定序列号的子元素使用样式以外,nth-child选择器还可以用来指定对某个父元素中的所有奇数子元素或者偶数子元素使用样式。
所有第奇数个子元素或偶数个子元素使用样式CSS代码:
li:nth-child(odd) { background:#ffb10a; color:#fff; } li:nth-child(even) { background:#75b504; color:#fff; }