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

小编典典

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

html

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

阅读 621

2020-05-10

共1个答案

小编典典

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>

2020-05-10