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