使用tbody tr:nth-child(even/odd)可纯css实现表格隔行变色，关键要限定作用域在tbody内避免thead干扰；动态插入需确保tr正确添加至tbody；nth-of-type更容错，nth-child更严格；ie8需js兜底。
直接用 tbody tr:nth-child(even) 和 tbody tr:nth-child(odd) 就能实现，无需 JS，现代浏览器全支持，关键是写对选择器、插对位置。
必须限定作用域在 tbody 里
很多人写 tr:nth-child(even) 没效果，是因为没加 tbody 前缀。浏览器会从整个 table 开始数 —— thead 里的 tr 也被算进去，结果第一行数据实际匹配的是 :nth-child(3)，根本轮不到 even。
- 正确写法：
tbody tr:nth-child(even) { background-color: #f9f9f9; } - 配套写上：
tbody tr:nth-child(odd) { background-color: #ffffff; } - 用开发者工具选中某行 → 右键「Reveal in Elements Panel」→ 看它在
tbody下的子节点序号（不是“第几行”，是 DOM 里的真实位置） - 临时删掉
thead测试：如果这时颜色出来了，就确认是表头干扰
动态插入新行时背景色自动生效
CSS 伪类是实时计算的，只要新 tr 正确加到 tbody 内部，颜色就会立刻更新。
- 推荐插入方式：
document.querySelector('tbody').appendChild(newTr)或tbody.insertAdjacentHTML('beforeend', '<tr><td>...</td></tr>') - 避免用
table.innerHTML += '...'：这会重建整个 DOM，旧节点丢失，样式可能短暂失效或错乱 - 用 Vue/React 时，检查最终渲染出的 HTML —— 确保
tr真正在tbody标签下，而不是被框架渲染到table直接子级
结构不干净时怎么选 nth-child 还是 nth-of-type
两者都可用，但适用场景不同：
-
tbody tr:nth-of-type(even)：只看tr标签顺序，跳过注释、空格等文本节点，语义更直观 -
tbody tr:nth-child(even)：按 DOM 子节点位置严格计数，哪怕中间混了<!-- comment -->也会被计入 - 如果表格由用户输入或模板拼接生成，存在意外嵌套（比如误把
form放进tbody），nth-child反而更可控——它暴露结构问题，方便排查 - 永远别写
table tr:nth-of-type(even)：会把thead的tr一起染色
IE8 及更老浏览器兜底方案
这些浏览器不支持 :nth-child，得靠 JS 打标：
- 纯 JS 方式：
document.querySelectorAll('tbody tr').forEach((tr, i) => tr.classList.toggle('even', i % 2 === 0)); - 对应 CSS：
tbody tr.even { background-color: #f5f5f5; } - 服务端渲染（如 PHP/Python）可在循环输出
<tr> 时直接加 class，避免页面闪动<li>别手动在 HTML 里写 <code><tr class="even">：增删行后极易错位，维护成本高</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
