CSS 伪类可以设置偶数和奇数列表项的样式吗？

使用 CSS 伪类设置偶数和奇数元素的样式

问题：

CSS 可以吗使用伪类来选择列表中的偶数和奇数元素并设置样式？预期结果是具有交替颜色的列表，但正在生成仅包含蓝色项目的列表。

示例：

以下代码预计会生成一个列表具有交替的绿色和红色项目，但相反，所有项目都是蓝色。

li { color: blue }
li:odd { color:green }
li:even { color:red }

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

答案：

要正确设置偶数和奇数元素的样式，应使用 :nth-child 伪类而不是：奇数和:even:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

演示: [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

以上是CSS 伪类可以设置偶数和奇数列表项的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！