css表格奇偶行颜色不同怎么写_使用:nth-child实现隔行变色

P粉602998670 2025-12-30 00:00:00 次阅读

使用 :nth-child(odd) 和 :nth-child(even) 可纯 CSS 实现表格奇偶行变色；推荐限定为 tbody tr 以避免影响表头；兼容 IE9+，IE8 需回退方案；支持自定义公式如 2n+2 或 3n+1 等。

直接用 :nth-child(odd) 和 :nth-child(even) 就能轻松实现表格奇偶行不同颜色，不需要 JavaScript，纯 CSS 即可。

基础写法：给 tr 设置背景色

最常用也最推荐的方式是给表格的 元素设置样式：



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"），但如今基本无需考虑。

进阶：跳过首行或自定义周期
比如想从第2行开始隔行变色，可用公式：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)。

基本上就这些，不复杂但容易忽略 tbody 限制和子元素上下文 —— 写对了，一行代码就能让表格清爽不少。