使用 :nth-child(odd) 和 :nth-child(even) 可纯 CSS 实现表格奇偶行变色；推荐限定为 tbody tr 以避免影响表头；兼容 IE9+，IE8 需回退方案；支持自定义公式如 2n+2 或 3n+1 等。
直接用 :nth-child(odd) 和 :nth-child(even) 就能轻松实现表格奇偶行不同颜色，不需要 JavaScript，纯 CSS 即可。
基础写法：给 tr 设置背景色
最常用也最推荐的方式是给表格的 注意： 如果表格里有 立即学习“前端免费学习笔记（深入）”； 这样即使表头有 比如想从第2行开始隔行变色，可用公式： 基本上就这些，不复杂但容易忽略 tbody 限制和子元素上下文 —— 写对了，一行代码就能让表格清爽不少。 元素设置样式：
tr:nth-child(odd) { background-color: #f9f9f9; } —— 奇数行（第1、3、5…行）tr:nth-child(even) { background-color: #eef5ff; } —— 偶数行（第2、4、6…行）:nth-child 是按父元素下的所有子元素顺序计数的。只要 是 或
的直接子元素，就能正确匹配。
只对 tbody 中的行生效（更稳妥）
或 ，为避免表头也被染色，建议限定作用范围：
tbody tr:nth-child(odd) { background-color: #fafafa; }tbody tr:nth-child(even) { background-color: #f0f8ff; }，也不会被 odd/even 计入，样式只作用于数据行。
兼容性小提醒
:nth-child 在 IE9+ 和所有现代浏览器中都支持。如果必须兼容 IE8，需改用 JS 或 class 手动标记（如 class="odd"/class="even"），但如今基本无需考虑。进阶：跳过首行或自定义周期
tr:nth-child(2n+2)（即 2,4,6…）和 tr:nth-child(2n+3)（即 3,5,7…）；
或者三行一循环：tr:nth-child(3n+1)、tr:nth-child(3n+2)、tr:nth-child(3n+3)。
