css3奇数偶数的伪属性

最新推荐文章于 2025-12-16 13:49:40 发布

原创最新推荐文章于 2025-12-16 13:49:40 发布 · 5.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文通过一个简单的HTML列表样式设置示例介绍了如何使用CSS选择器:nth-child()来为奇数和偶数行设置不同的背景颜色。这种方法常用于美化表格或列表的显示效果，提高用户体验。

<style>
    /*奇数*/
    ul li:nth-child(odd){
        background-color: green;
    }
    /*偶数*/
    ul li:nth-child(even){
        background-color: red;
    }

</style>
<ul>
    <li>
        1
    </li>
    <li>
        2
    </li>
    <li>
       3
    </li>
    <li>
        4
    </li>
    <li>
        5
    </li>
    <li>
        6
    </li>
</ul>