tbody tr:nth-child(even)必须加tbody前缀，否则浏览器从table根节点计数，thead的tr会干扰序号导致隔行变色错位；同时需设置border-collapse: collapse消除单元格间隙。
tbody tr:nth-child(even) 为什么必须加 tbody 前缀
不加 tbody 就写 tr:nth-child(even)，样式大概率失效——因为浏览器会从整个 <table> 开始数子节点，<thead> 里的 <tr> 也被算进去。比如表头占 1 行，第一行数据实际是第 2 个 <tr>，匹配的是 :nth-child(2)，刚好是 even；但第二行数据就变成第 3 个 <tr>，匹配 odd，结果整行错位。
正确做法是限定作用域：tbody tr:nth-child(even) 和 tbody tr:nth-child(odd)。用开发者工具选中某行 → 右键「Reveal in Elements Panel」→ 看它在 <tbody> 下的真实子节点序号（不是“第几行”，是 DOM 树里的位置）。
- 临时删掉
<thead>测试：如果这时颜色出来了，基本就是表头干扰 - 如果表格没写
<tbody>标签，浏览器会自动补上，但 DOM 结构仍存在，不能省略选择器中的tbody - 千万别写
table tr:nth-child(even)—— 它会把<thead>和<tfoot>一并染色
border-collapse: collapse 是隔行变色的隐形前提
默认表格边框是分离的（border-collapse: separate），单元格之间有空白缝隙，tr 的背景色会被这些间隙“割裂”，视觉上变成断续条纹，根本不像“隔行”。
必须在 <table> 上设置 style="border-collapse: collapse;" 或 CSS 中声明 table { border-collapse: collapse; }，才能让背景色连成完整一行。
立即学习“前端免费学习笔记（深入）”；
-
border-collapse: collapse还能消除默认的cellspacing间距，让表格更紧凑 - 同时建议给
<td>和<th>加padding，否则文字紧贴边框，高亮效果廉价 - 别用已废弃的
bgcolor属性（如<tr bgcolor="#eee">），HTML5 不支持，W3C 校验失败
动态插入新行时背景色不生效？检查插入位置
CSS 伪类是实时计算的，只要新 <tr> 正确添加到 <tbody> 内部，:nth-child() 就会立刻匹配生效。问题通常出在插入逻辑上。
推荐方式：document.querySelector('tbody').appendChild(newTr) 或 tbody.insertAdjacentHTML('beforeend', '<tr><td>...</td></tr>')。
- 避免用
table.innerHTML += '...'：这会重建整个 DOM，旧节点丢失，样式可能短暂失效或错乱 - 用 Vue/React 时，检查最终渲染出的 HTML —— 确保
<tr>真正在<tbody>标签下，而不是被框架渲染到<table>直接子级 - 如果用了 MutationObserver 监听
<tbody>变化，注意它不会触发重绘，但 CSS 本身会响应新节点
IE8 怎么办？JS 打标比 class 手动写靠谱
IE8 不支持 :nth-child()，必须用 JS 回退。但千万别在 HTML 里手动写 <tr class="even"> —— 增删行后 class 就错乱，维护成本爆炸。
前端最常用的是循环打标：document.querySelectorAll('tbody tr').forEach((tr, i) => { tr.classList.toggle('even', i % 2 === 0); });
- 对应 CSS：
tr.even { background-color: #f5f5f5; } - 服务端渲染（如 PHP/Python 模板）更稳妥：循环输出
<tr>时用i % 2 == 0插入 class，避免页面闪动 - jQuery 的
$('tbody tr:even').addClass('even')行为和 CSS:nth-child(even)一致，但纯 JS 更轻量、无依赖
border-collapse: collapse 漏了，或者 <tbody> 标签写了但选择器没跟上——这两处一错，整个效果就“看起来没生效”。 
