使用 :nth-child(even) 和 :nth-child(odd) 可为列表或表格的奇偶行设置不同背景色，1. 创建无序列表；2. 用CSS定义li样式，:nth-child(even)设浅灰、:nth-child(odd)设白色；3. 同样适用于tr实现表格斑马线；4. 注意子元素顺序和浏览器兼容性。
要实现CSS列表项奇偶行不同颜色，可以使用 :nth-child(even) 和 :nth-child(odd) 伪类选择器，为奇数行和偶数行分别设置背景色，从而创建清晰的条纹效果。这种方法适用于无序列表（ul）、有序列表（ol）或表格中的行（tr），提升可读性。
以一个简单的无序列表为例：
通过CSS分别为奇数行和偶数行设置不同的背景色：
.striped-list li { padding: 10px; list-style-type: none; }.striped-list li:nth-child(even) { background-color: #f2f2f2; / 偶数行浅灰色 / }
.striped-list li:nth-child(odd) { background-color: #ffffff; / 奇数行白色 / }
说明：
- :nth-child(even) 匹配所有偶数位置的子元素（第2、4、6…项）
- :nth-child(odd) 匹配所有奇数位置的子元素（第1、3、5…项）
- 背景色可根据设计需求自定义，建议选择对比度适中、阅读舒适的配色
该方法不仅适用于列表，也适用于表格行：
立即学习“前端免费学习笔记（深入）”；
table tr:nth-child(even) { background-color: #f9f9f9; } table tr:nth-child(odd) { background-color: #eef5fb; }这样可以在数据表格中轻松实现斑马线效果，提高内容可读性。
使用时需注意以下几点：
- 确保目标元素是其父容器的直接子元素，否则选择器可能不生效基本上就这些，利用 :nth-child(even) 和 :nth-child(odd) 可快速实现条纹样式，无需额外类名，简洁高效。
以上就是css列表项奇偶行不同颜色如何设置_使用:nth-child(even/odd)实现条纹效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
937
收藏
