使用: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 项。
通过为奇数行和偶数行分别设置不同的字体颜色，可以让列表更易读。
示例代码：<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul>
CSS 样式如下：
li:nth-child(odd) {
color: #333; /* 奇数行深色 */
}
li:nth-child(even) {
color: #888; /* 偶数行浅色 */
}
这样，第1、3、5项文字颜色为 #333，第2、4项为 #888。
立即学习“前端免费学习笔记（深入）”；
你可以根据页面主题更换颜色，比如使用蓝色和灰色，或深蓝与深灰等对比柔和的配色。
li:nth-child(odd) {
color: darkblue;
}
li:nth-child(even) {
color: dimgray;
}
确保选择器作用在正确的元素上。如果 li 外面有其他嵌套标签，需确认没有干扰样式继承。同时，:nth-child 是基于父元素下的所有子元素排序，不只是 li，所以如果列表中有其他类型标签（如 div），可能会影响计数。
若列表结构复杂，建议使用 li:nth-of-type(odd) 更精确匹配 li 元素。
基本上就这些，用 :nth-child 控制奇偶行颜色简单又有效。
以上就是css列表项奇偶行字体颜色不同如何实现_使用:nth-child和color设置的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
948
收藏
