使用 tr:nth-child(odd) 和 tr:nth-child(even) 可实现表格奇偶行不同背景色，提升可读性；其中 odd 对应 2n+1 选奇数行，even 对应 2n 选偶数行，建议限定在 tbody 内使用以避免表头干扰，现代浏览器广泛支持，旧版 IE 需降级处理，还可扩展为 3n+1 等模式实现周期性配色。
在网页表格或列表中，为了让内容更易读，常常需要对奇数行和偶数行使用不同的背景色。这可以通过CSS中的 :nth-child 选择器轻松实现。下面详细介绍如何使用 tr:nth-child(odd) 和 tr:nth-child(even) 来设置交替行样式。
基本语法与工作原理
:nth-child() 是一个功能强大的CSS伪类选择器，它可以根据元素在其父容器中的位置来选择特定的子元素。对于表格中的 tr（表格行），我们可以利用它来区分奇数行和偶数行。
-
tr:nth-child(odd)：匹配所有处于奇数位置的tr元素（如第1、3、5行） -
tr:nth-child(even)：匹配所有处于偶数位置的tr元素（如第2、4、6行）
这些关键字是CSS内置的，也可以用公式形式表示，比如 2n+1 等同于 odd，2n 等同于 even。
实际应用示例
以下是一个简单的HTML表格结构：
立即学习“前端免费学习笔记（深入）”；
| 张三 | 85分 |
| 李四 | 92分 |
| 王五 | 78分 |
| 赵六 | 96分 |
添加如下CSS样式即可实现隔行变色：
tr:nth-child(odd) {
background-color: #f0f0f0;
}
tr:nth-child(even) {
background-color: #ffffff;
}
这样页面上的表格就会呈现出清晰的条纹效果，提升可读性。
注意事项与兼容性
虽然 :nth-child 在现代浏览器中支持良好，但仍需注意几点：
- 计数从1开始，即第一行是“第1个子元素”，属于
odd - 如果表格中有其他类型的行（如
thead中的tr），会影响计数顺序。建议将样式限定在tbody内部使用，避免头部行被误选 - 推荐写法：
tbody tr:nth-child(odd)，确保只对数据行生效 - 旧版IE（IE8及以下）不支持
:nth-child，若需兼容老浏览器，可考虑JavaScript辅助或直接添加class类名
扩展用法：自定义周期性样式
除了奇偶行，还可以实现更复杂的间隔模式。例如每3行一循环：
tr:nth-child(3n + 1) {
background-color: #e0f7fa;
}
tr:nth-child(3n + 2) {
background-color: #fff8e1;
}
tr:nth-child(3n + 3) {
background-color: #f3e5f5;
}
这种技巧适用于日历、排班表等需要周期性视觉区分的场景。
基本上就这些。掌握 :nth-child(odd) 和 :nth-child(even) 能让你快速实现美观的表格样式，无需额外HTML标记，简洁高效。
