17370845950

使用 :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），提升可读性。

1. 基本HTML结构

以一个简单的无序列表为例：

• 项目一
• 项目二
• 项目三
• 项目四
• 项目五

2. 使用 :nth-child 设置奇偶行颜色

通过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…项）
- 背景色可根据设计需求自定义，建议选择对比度适中、阅读舒适的配色

3. 扩展用法：兼容表格或其他容器

该方法不仅适用于列表，也适用于表格行：

table tr:nth-child(even) { background-color: #f9f9f9; } table tr:nth-child(odd) { background-color: #eef5fb; }

这样可以在数据表格中轻松实现斑马线效果，提高内容可读性。

4. 注意事项

使用时需注意以下几点：

- 确保目标元素是其父容器的直接子元素，否则选择器可能不生效
- 若列表中包含其他非li元素（如div分隔符），会影响奇偶计算，建议使用 :nth-of-type 更精确控制
- 在老旧浏览器（如IE8及以下）中不支持 :nth-child，需考虑兼容性处理

基本上就这些，利用 :nth-child(even) 和 :nth-child(odd) 可快速实现条纹样式，无需额外类名，简洁高效。