css3奇数偶数的伪属性

最新推荐文章于 2024-10-26 14:43:59 发布

miaoqiwu

最新推荐文章于 2024-10-26 14:43:59 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/douqujie/article/details/45042313

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>