tbody tr:nth-child(odd)和tbody tr:nth-child(even)是最稳妥的隔行变色方案，因限定作用域可避免误染表头、兼容现代浏览器且无需js；其他写法易受dom结构干扰或兼容性限制。
tbody tr:nth-child(odd) 和 tbody tr:nth-child(even) 是当前最稳妥、零 JS、现代浏览器全支持的实现方式。其他写法要么误染表头，要么在动态插入或非法 DOM 结构下失效。
为什么不能直接写 tr:nth-child(odd)
因为 tr 在 DOM 中是 table 的子元素，而 thead 里的 tr 也会被计入序号——结果第一行（通常是表头）就变成奇数色，破坏视觉层级。
常见错误现象：表头背景变色、数据行起始行颜色错位（比如第 1 行是浅灰，本该是白色）。
- 正确作用域必须限定为
tbody tr，排除thead和tfoot - 别用
table tr或tr:nth-of-type()：nth-of-type受注释、空格文本节点干扰，实测计数漂移 - IE8 及更早版本不支持
:nth-child，如需兼容，得 fallback 到 JS 遍历加 class
动态插入新行时背景色不生效？检查 DOM 插入位置
CSS 规则本身是响应式的，只要新 tr 正确插入到 tbody 内，:nth-child() 就会自动重算——但很多问题出在插入逻辑上。
- 错误做法：
table.appendChild(newTr)→newTr被挂到table下，脱离tbody，伪类失效 - 正确做法：
document.querySelector('tbody').appendChild(newTr) - 避免用
innerHTML +=重写整个tbody；改用tbody.insertAdjacentHTML('beforeend', htmlString) - 如果用了 Vue/React 等框架，确保模板中
tr真正渲染在tbody内部，而非被 wrapper 元素包裹
表格里嵌了 form 就失效？这是 DOM 结构违法
HTML 规范禁止 form 直接作为 table 子元素或与 tr 并列。浏览器会自动修复 DOM，把 form 移出 tbody，导致 tr 被物理分割，:nth-child() 计数断开。
- 典型非法结构：
<tbody> <tr></tr> <form></form> <tr></tr> </tbody> - 修复方案：把
form完全塞进tr里，例如<tr><form><td>...</td></form></tr> - 若无法调整结构（如 CMS 输出不可控），唯一可靠解法是 JS 手动遍历
tbody.querySelectorAll('tr')，按索引加row-odd/row-even类
配色和性能细节容易被忽略
视觉柔和度和维护性比“能用”更重要，但常被跳过。
- 别用纯灰如
#f0f0f0：OLED 屏上发亮刺眼，推荐#f9f9f9或 CSS 变量统一管理 - 悬停高亮建议用
background-color+transition，避免影响布局重排 - 多个
tbody时，tbody:nth-of-type(1) tr:nth-child(odd)可精准控制第一个分组 - 如果表格含可展开行、合并单元格等复杂结构，
:nth-child()仍有效——它只看 DOM 顺序，不看渲染逻辑
nth-child，而是没意识到表头、非法嵌套、插入位置这些隐性结构问题。写完记得 inspect 元素，确认 tr 确实在 tbody 下，且中间没被其他标签打断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
