如何设置偶数和奇数元素的样式？

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以使用CSS伪类选择列表项的偶数和奇数实例？

我希望以下内容会产生一系列交替的颜色，但我会得到蓝色项目的列表：

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>

回答：

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>

以上是 如何设置偶数和奇数元素的样式？ 的全部内容， 来源链接： utcz.com/qa/420631.html

回到顶部