先说一个核心结论：tbody tr:nth-child(even) 是实现表格斑马纹最稳妥的写法。为什么？因为如果直接使用 tr:nth-child(even)，很容易受到 的干扰，导致表格首行数据被误染背景色。只有将选择器限定在 tbody 作用域内，才能精确匹配数据行，避免奇偶错乱。这个坑，很多开发者都踩过。

tbody tr:nth-child(even) 是最稳妥的写法

直接使用 tr:nth-child(even) 容易掉入陷阱——当表格中包含 时，第一行 是表头，占用了序号 1，导致 tbody 里的第一行变成第 2 个子元素，被 even 命中。结果表头没有背景色，而首行数据反而被染色。因此必须限定作用域：tbody tr:nth-child(even) 才能确保只影响数据行，实现正确的斑马纹效果。

常见错误包括：

• 写成 table tr:nth-child(even)，把 和 混在一起计数
• 漏掉 tbody 但没删掉 ，导致视觉奇偶顺序与选择器奇偶顺序错位
• 在 Vue/React 渲染后 DOM 结构发生变化（例如自动包裹 ），而 CSS 仍按旧结构编写

nth-child(odd) 和 nth-child(even) 别混用

nth-child(odd) 和 nth-child(even) 语义清晰、行为确定，但不能在同一规则中交叉替换。例如你写了 tbody tr:nth-child(odd) { background: #f9f9f9; }，再补一条 tbody tr:nth-child(even) { background: #fff; } —— 后者会覆盖前者对偶数行的默认背景。更关键的是，如果某行因 JS 动态插入或 rowspan 合并导致 DOM 位置偏移，even 可能漏匹配，留下白色“断层”。

实操建议：

• 只设置一个规则，例如用 tbody tr:nth-child(even) 加浅灰色背景，其余行保持透明或继承父级背景
• 避免同时编写 odd 和 even 两套背景色，除非你明确需要三段式或更高阶循环样式
• 颜色值推荐使用 rgba(245, 245, 245, 0.9) 而非纯色，减少与边框和文字的硬对比

遇到 nth-child 不生效？先查这三件事

有时选择器写对了，但背景色没有出现，问题往往出在环境上。打开浏览器开发者工具，点开任意一条数据行 ，查看 computed 样式中的 background 是否被覆盖，然后顺藤摸瓜确认以下几点：

• 它的父元素是否就是你指定的那个 tbody？某些框架（如 DataTables）会重绘 DOM，将原始 替换成新容器，甚至删除标签名
• 是否存在 !important 或内联 style="background:..." 直接覆盖了 CSS 规则
• 执行 document.querySelectorAll('tbody tr') 和 document.querySelectorAll('tbody tr:nth-child(even)')，看后者数量是否约等于前者的一半；如果远少于一半，说明 DOM 中插入了注释、空格文本节点或隐藏的 ，干扰了序号计算

深色模式和 hover 要后置声明

nth-child 规则本身不感知系统主题，也不响应交互。因此需要额外处理：

• 深色模式下斑马纹发灰看不清？需要单独添加媒体查询：@media (prefers-color-scheme: dark) { tbody tr:nth-child(even) { background-color: #333; } }
• tr:hover 效果没反应？这是因为 CSS 层叠顺序问题——hover 规则必须写在 nth-child 之后，否则会被后者的 background 覆盖
• 移动端小屏下斑马纹“断层”？这不是样式失效，而是表格被转换成卡片流（display: block），此时 tr 已不再是表格行语义，nth-child 虽按 DOM 顺序工作，但视觉节奏已变。此时应该用媒体查询重置：@media (max-width: 768px) { tbody tr { background: none; } }

真正麻烦的不是怎么写 nth-child，而是你无法靠肉眼判断它到底“数到了哪一行”。DOM 结构稍有变动，序号就会偏移，颜色就会出错。盯住具体容器、验证实际节点数量、留一手 fallback（例如用 class 手动标记），比死背公式管用得多。