如何使用 CSS 正确设置偶数和奇数列表项的样式？

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

CSS 伪类是一个强大的工具，用于根据 HTML 元素的位置或状态来选择和样式化 HTML 元素。一个常见的用例是交替列表中元素的外观。

最初，以下代码可能看起来是创建交替颜色列表的一种简单方法：

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

但是，这将导致所有列表项呈蓝色。这是因为当样式声明同时应用于元素及其伪类时，后者始终优先。在这种情况下，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;
}

第 n 个子级伪类根据元素在父容器中的位置选择元素，使我们能够定位偶数和奇数元素具体来说。

这是实时预览：

[代码片段]

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