使用:nth-child(odd)和:nth-child(even)可设置列表奇偶行字体颜色不同，提升可读性，如li:nth-child(odd){color:#333;}li:nth-child(even){color:#888;}，注意避免其他标签干扰计数，复杂结构可用li:nth-of-type。
要实现CSS列表项中奇偶行字体颜色不同，可以使用 :nth-child 伪类选择器结合 color 属性来设置。这种方法适用于 ul、ol 等列表元素中的 li 项。
1. 使用 :nth-child(odd) 和 :nth-child(even)
通过为奇数行和偶数行分别设置不同的字体颜色，可以让列表更易读。
示例代码：- 第一项
- 第二项
- 第三项
- 第四项
- 第五项
CSS 样式如下：
li:nth-child(odd) {
color: #333; /* 奇数行深色 */
}
li:nth-child(even) {
color: #888; /* 偶数行浅色 */
}
这样，第1、3、5项文字颜色为 #333，第2、4项为 #888。
立即学习“前端免费学习笔记（深入）”；
2. 可自定义颜色提升可读性
你可以根据页面主题更换颜色，比如使用蓝色和灰色，或深蓝与深灰等对比柔和的配色。
li:nth-child(odd) {
color: darkblue;
}
li:nth-child(even) {
color: dimgray;
}
3. 注意事项
确保选择器作用在正确的元素上。如果 li 外面有其他嵌套标签，需确认没有干扰样式继承。同时，:nth-child 是基于父元素下的所有子元素排序，不只是 li，所以如果列表中有其他类型标签（如 div），可能会影响计数。
若列表结构复杂，建议使用 li:nth-of-type(odd) 更精确匹配 li 元素。
基本上就这些，用 :nth-child 控制奇偶行颜色简单又有效。
