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

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

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

而不是：

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 允许您根据元素在列表中的位置来选择元素，确保将正确的样式应用于每个项目。