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

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

是否可以利用 CSS 伪类来区分偶数和奇数列表的样式物品？

预期结果：

具有交替颜色的列表，如以下代码片段所示：

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

实际结果：

所有列表项最终都变为蓝色，而不是交替颜色。

解决方案：

要成功设置偶数和奇数元素的样式，建议使用 nth-child 伪类，如下所示：

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>

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