CSS 中的偶数与奇数列表项样式：`li:odd`/`:even` 或 `:nth-child()`？

偶数和奇数列表元素的样式：伪类与第 n 个子元素

当尝试使用 CSS 伪类实现列表项的交替颜色时，您可以遇到问题。虽然为此目的使用 li:odd 和 li:even 似乎合乎逻辑，但其行为可能是不可预测的。

要有效地设置列表项的偶数和奇数实例的样式，请考虑使用以下方法：

相反of:

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

使用：

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

通过替换 :odd 和 :even 为 :nth-child(odd) 和 :nth- child(even)，就达到了想要的交替着色效果。这是因为 :nth-child 允许您根据元素在列表中的位置来选择元素，确保将正确的样式应用于每个项目。

以上是CSS 中的偶数与奇数列表项样式：`li:odd`/`:even` 或 `:nth-child()`？的详细内容。更多信息请关注PHP中文网其他相关文章！