CSS奇偶行换色技巧：nth-child实现背景交替

珍惜时间，勤奋学习！今天给大家带来《CSS奇偶行换色技巧：:nth-child实现交替背景》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

使用 :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，表格立刻清爽易读，不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《CSS奇偶行换色技巧：nth-child实现背景交替》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！