最常用方案是直接在tr上用:nth-child(odd)和:nth-child(even)实现隔行变色；需注意thead/tfoot会影响计数，应限定为tbody tr；避免使用:nth-of-type；an+b语法可精确控制节奏；colspan或动态插入可能破坏视觉效果，此时建议JS加class控制。
用 :nth-child 给表格行交替变色最常用
直接在 tr 上用 :nth-child(odd) 和 :nth-child(even) 就能实现隔行换色，这是最简洁、兼容性最好的方案。注意它匹配的是父元素（tbody 或 table）下的第 N 个 tr，不是“第几行数据”。
table tr:nth-child(odd) {
background-color: #f9f9f9;
}
table tr:nth-child(even) {
background-color: #eef2f7;
}- 如果表格有
thead或tfoot，:nth-child会把它们一起算进去，可能导致样式错位 - 解决办法：给
tbody tr单独写选择器，比如tbody tr:nth-child(odd) - 不要用
:nth-of-type替代 —— 它只看标签类型，但tr在thead/tbody中是分开的，行为不一致
:nth-child(n) 的公式写法能跳着选行
除了 odd/even，你还能用 an+b 语法精确控制，比如每 3 行高亮第 1 行：:nth-child(3n+1)。这对分组显示或强调特定节奏的数据很有用。
/* 每 4 行中，给第 2 行加背景 */
tbody tr:nth-child(4n+2) {
background-color: #fff8e1;
}-
n从 0 开始代入：当n=0→4×0+2 = 2，第 2 行；n=1→ 第 6 行；以此类推 - 负数也合法，比如
:nth-child(-n+3)匹配前 3 行（n=0→3,n=1→2,n=2→1） - 别写成
:nth-child(n+3)期望“从第 3 行开始”，它实际匹配第 3、4、5… 行 —— 要排除前几行得用:not()配合
遇到 colspan 或动态插入行时，:nth-child 会失效
如果某行用了 colspan，或者 JS 动态往 tbody 里 append 新 tr，:nth-child 依然按 DOM 顺序计数，但视觉上可能不再“隔行”。这时候纯 CSS 就不够用了。
- 检查是否所有
tr都在同一个父容器下（比如混用了thead和tbody，又没限定作用域） - 动态增删行后，CSS 不会重算伪类，但浏览器会自动更新渲染 —— 多数情况没问题；真出问题可手动触发
tr的offsetHeight读取强制重排 - 更稳妥的做法：JS 插入时直接加 class，比如
row-odd/row-even，再用 class 控制背景
background-color 被子元素覆盖？优先级和继承要留意
background-color 本身不会被继承，但如果 td 或 th 自己设置了背景，就会盖住 tr 的背景。另外，border-collapse: collapse 下边框可能遮挡颜色边缘。
立即学习“前端免费学习笔记（深入）”；
- 确保
td和th没有设background-color，或者设为transparent - 如果用了
border-collapse: collapse，加background-clip: padding-box防止背景被边框裁掉 - IE8 及更早不支持
:nth-child，需用 JS 模拟或退化为全表单色
真正麻烦的不是怎么写 :nth-child，而是表格结构不干净时它“算得对但看起来不对”——多一层 tbody、少一个 tr、插了个 th 当标题行，都可能让颜色错位。动手前先用浏览器开发者工具看一眼 tr 的实际层级和顺序。
