为什么我的 CSS :odd 和 :even 选择器没有按预期工作？

设置偶数和奇数元素的样式

CSS 伪类 :odd 和 :even 允许您将样式应用于列表中元素的奇数和偶数实例。但是，将这些伪类与基本样式规则结合使用时会出现问题，导致意外结果。

例如，考虑以下 CSS 和 HTML 代码：

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>

您可能期望这会生成一个交替颜色的列表，但相反，所有列表项都是blue.

解决方案

要解决这个问题，您可以使用 nth-child 伪类来代替 :odd 和 :even。 nth-child 的语法如下：

li:nth-child(n) {...}

其中 n 表示元素在其父元素中的位置。

要设置奇数和偶数列表项的样式，可以使用以下命令CSS:

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>

这将产生一个黑名单项目列表，其他所有项目在灰色 (#777) 和蓝色。

以上是为什么我的 CSS :odd 和 :even 选择器没有按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！