tbody tr:nth-child(odd) 更安全，因 table 的直接子元素常为 thead/tbody/caption，table tr:nth-child(odd) 易因序号被表头占据而失效；tbody 内 tr 为直系子元素，序号连续无干扰。
tbody tr:nth-child(odd) 为什么比 table tr:nth-child(odd) 更安全
因为 table 的直接子元素通常不是 tr，而是 thead、tbody 或 caption。写 table tr:nth-child(odd) 实际上在匹配「table 的子元素中第 1、3、5… 个位置的元素，且该元素是 tr」——但这些位置大概率被 thead 占了，导致规则根本没生效。
真正起作用的是 tbody tr:nth-child(odd)：它把计数范围严格限定在 tbody 内部，所有 tr 都是它的直系子元素，序号从 1 开始连续排列，不会被表头、注释或服务端插入的空节点干扰。
- 检查 DOM 结构时，用浏览器开发者工具确认
tr是否真在目标父容器下（右键 → “检查元素”，看层级） - 如果表格框架（如 Ant Design）把
tr渲染到tbody外，或用了display: contents，那nth-child就会失效，此时必须换用 JS 注入 class 或改用tr:nth-of-type(odd) - 不要写
table tbody tr:nth-child(odd)这种冗余选择器，增加 specificity 且无实际收益
tr:nth-of-type(odd) 能绕过哪些 DOM 干扰
tr:nth-of-type(odd) 只统计同为 tr 标签的兄弟元素，自动跳过 thead、tfoot、caption、HTML 注释、文本节点，甚至中间插进来的 div（只要它不在同一父级下）。
但它有个硬伤：当多个 tr 分散在不同父容器里（比如 thead tr 和 tbody tr），nth-of-type 会在每个父容器内**各自从 1 开始计数**。这意味着 thead tr 是第 1 个，tbody tr 的第一个也是第 1 个——全被算作 odd，结果表头和第一行数据同时变色。
- 所以不能单独依赖
tr:nth-of-type(odd)，必须加作用域限定，例如tbody tr:nth-of-type(odd) - 动态插入
tr（如分页加载新行）不影响nth-of-type计数逻辑，它只看当前同级tr的顺序 - 若表格含
tr class="summary"这类非数据行，nth-of-type仍会计入它；想跳过就得用 class 过滤，CSS 做不到，得靠 JS 或后端渲染时剔除
如何用 nth-child 实现“前三行不隔色 + 后续每 4 行一组”
单一伪类无法承载多段逻辑。nth-child(4n+1) 这类公式只能表达等差序列，没法描述“前 N 行例外”。必须拆成独立规则，靠 specificity 和顺序覆盖。
例如：前三行不设背景，从第 4 行开始按 4 行循环（即第 4–7 行一组、8–11 行一组……），其中每组第 1、3 行用浅灰背景：
tbody tr:nth-child(-n+3) {
background-color: transparent;
}
tbody tr:nth-child(n+4):nth-child(4n+1),
tbody tr:nth-child(n+4):nth-child(4n+3) {
background-color: #f5f5f5;
}
-
nth-child(-n+3)匹配第 1～3 行（-1+3=2，-2+3=1，-3+3=0，所以只到 3） -
n+4确保只影响第 4 行及之后；再叠加4n+1或4n+3定位组内奇数位 - 注意规则顺序：重置样式必须写在前面，否则会被后续规则覆盖
- 这种写法对浏览器解析无压力，但维护成本高；复杂逻辑建议改用 JS 动态加 class
颜色变量 + 隔行变色组合时容易漏掉的关键点
用 CSS 自定义属性（--row-odd-bg）抽离颜色很好，但变量作用域和继承链常被忽略。最常见问题是：变量定义在 :root，但某层父容器（如 table）设置了 background-color: rgba(255,255,255,0.9)，导致 tr 的背景被“洗淡”，看起来像没生效。
- 变量必须在使用前定义，且不能被局部
style属性意外覆盖（比如<tr style="--row-odd-bg: red"> 不会生效，因为 <code>style里不能条件赋值） - 确保
tr没有设置opacity、transform或祖先用了filter，否则会创建新层叠上下文，干扰背景渲染 - 用
outline: 1px solid red临时测试是否命中元素，比反复调背景色更高效 - border-collapse: collapse 下，
tr的背景可能被边框遮盖，加background-clip: padding-box可修复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
