使用 :nth-child(odd) 或 :nth-child(2n+1) 可选择奇数行，前者更直观，后者通过公式实现，均适用于表格或列表的隔行样式设置。
要通过 CSS 选择所有奇数行元素，可以使用 :nth-child() 伪类选择器。这个选择器支持公式计算，能精准定位特定位置的子元素。
这是最直接的方式，odd 关键字代表“奇数”，会匹配第 1、3、5、7... 行。
tr:nth-child(odd) {
background-color: #f0f0f0;
}
这段代码会给表格中所有奇数行设置浅灰色背景。
2n+1 是数学表达式，表示从 1 开始，每隔一个元素选一次，结果同样是奇数项。
立即学习“前端免费学习笔记（深入）”；
li:nth-child(2n+1) {
color: blue;
}
适用于列表、表格或其他容器内的子元素，比如让奇数行文字变蓝。
确保目标元素是父容器的直接子元素，并且计数从 1 开始。如果前有其他类型元素干扰，可能影响匹配结果。可结合更具体的选择器避免冲突，例如：
table tbody tr:nth-child(odd)
这样更精确地限定表格主体中的奇数行。
基本上就这些，用 :nth-child(odd) 最直观，也易于维护。
以上就是如何通过css选择所有奇数行元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
587
收藏
