最常用方案是直接在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 就不够用了。
