使用 :nth-child(odd) 和 :nth-child(even) 可纯 css 实现表格奇偶行变色；推荐限定于 tbody 内使用以避开表头干扰，并注意避免误用 :nth-of-type，兼容 IE9+。
用 :nth-child(odd) 和 :nth-child(even) 就能轻松实现表格奇偶行自动换色，不需要 javaScript，纯 CSS 即可。
基础写法：直接作用于 tr
最常用也最直观的方式是给表格的 tr 元素设置背景色：
tr:nth-child(odd) { background-color: #f9f9f9; }tr:nth-child(even) { background-color: #eef5ff; }
注意：这里 odd 和 even 是按 tr 在 tbody（或整个 table）中的顺序计算的，不是按数据逻辑的“第1、3、5行”，而是 dom 中实际的第1、3、5个 tr 元素。
避开表头：只对 tbody 中的行生效
如果表格有 thead，上面的写法可能把表头也算进计数，导致第一行数据变色异常。稳妥做法是限定在 tbody 内：
立即学习“前端免费学习笔记（深入）”；
tbody tr:nth-child(odd) { background-color: #f9f9f9; }tbody tr:nth-child(even) { background-color: #eef5ff; }
这样即使 thead 里有 tr，也不会影响数据行的奇偶判断。
兼容性与注意事项
:nth-child 在 IE9+ 和所有现代浏览器中都支持，基本无需担心兼容问题。但要注意几点：
- 不要写成
tr:nth-of-type——它选的是同类型标签（比如只算tr），看似一样，但在有th行或动态插入元素时行为可能不同；:nth-child更稳定。 - 如果用了
colspan或rowspan不影响计数，奇偶仍是按tr标签顺序来。 - 想高亮鼠标悬停行？加一句
tr:hover { background-color: #d0e7ff !important; }即可，!important可确保覆盖奇偶色。
进阶：从第2行开始交替（比如跳过标题行）
如果第一行数据要和第二行同色（即“偶数位起始”），可用公式写法：
-
tbody tr:nth-child(2n) { background-color: #f9f9f9; }→ 第2、4、6…行 -
tbody tr:nth-child(2n+1) { background-color: #eef5ff; }→ 第1、3、5…行
2n 等价于 even，2n+1 等价于 odd，但公式更灵活，比如 2n+3 就是从第3行开始偶数交替。
基本上就这些。写两行 CSS，表格立刻清爽易读，不复杂但容易忽略细节。