用 nth-child 实现表格奇偶行样式需为 tr 设置不同背景色，推荐 table tbody tr:nth-child(odd/even) 以避开 thead 干扰，兼容 IE9+，如需跳过首行可用 2n+2/2n+3。
用 nth-child 实现表格奇偶行样式，核心是给 tr 元素设置不同背景色，让视觉更清晰易读。
基础写法：直接作用于 tr
最常用的方式是给表格中的行（tr）添加奇偶区分：
-
tr:nth-child(odd)匹配第1、3、5…行（奇数行） -
tr:nth-child(even)匹配第2、4、6…行（偶数行）
示例 CSS：
table tr:nth-child(odd) { background-color: #f9f9f9; }
table tr:nth-child(even) { background-color: #eef5ff; }
注意表头 th 的影响
如果表格有 thead，且里面包含 tr（比如 <thead><tr><th>...</th></tr></thead>），那么 nth-child 是按整个表格所有 tr 顺序计数的，表头行也会被算进去。
立即学习“前端免费学习笔记（深入）”；
解决办法有两个：
- 把样式限定在
tbody tr上，避开thead和tfoot - 改用
nth-of-type（它只统计同类型元素，但需确保tr是唯一子元素）
推荐写法：
table tbody tr:nth-child(odd) { background-color: #f9f9f9; }
table tbody tr:nth-child(even) { background-color: #eef5ff; }
兼容性与替代方案
nth-child 在现代浏览器中支持良好（IE9+），如需兼容 IE8 及更早版本，可考虑 JS 动态添加 class，或使用 :first-child + 相邻兄弟选择器模拟，但维护成本高，一般不推荐。
进阶：跳过首行再奇偶交替
若第一行是标题行（无 thead），想从第二行开始交替，可用：
-
tr:nth-child(2n+2)→ 第2、4、6…行（即新定义的“偶数行”） -
tr:nth-child(2n+3)→ 第3、5、7…行（即新定义的“奇数行”）
例如：
table tr:nth-child(2n+2) { background-color: #f0f8ff; }
table tr:nth-child(2n+3) { background-color: #fffaf0; }
不复杂但容易忽略细节，关键是明确目标元素范围，优先用 tbody tr 避免干扰。
