1. 首页
  2. 问题
  3. 如何设置偶数和奇数元素的样式？
小编典典

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

all

是否可以使用 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>

阅读 72

收藏
2022-04-04

共1个答案

小编典典

演示：http:
//jsfiddle.net/thirtydot/K3TuN/1323/

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>

文档：

2022-04-04