用 :nth-child(even) 不生效的根本原因是它按 dom 物理位置计数，遇 、注释或文本节点即错乱；应改用 tbody tr:nth-of-type(even) 确保只统计 标签。
表格奇偶行变色为什么用 :nth-child(even) 不生效？
常见现象是加了样式但所有行颜色一样，或只有第一列变色。根本原因在于 :nth-child() 是按 DOM 树中的**物理位置**计数，不是按 <tr> 的逻辑顺序——只要某行前面有 <code><thead>、<code><tbody>、<code><tfoot> 或其他非 <code><tr> 元素（比如注释、空格文本节点），计数就乱了。
<p>实操建议：</p>
<ul><li>确认目标 <code><tr> 是否直接子元素：检查父容器是不是 <code><tbody>，且里面没有混入 <code><div>、注释或换行符导致的文本节点
<li>优先选 <code><tbody> 作为选择器起点，例如 <code>tbody tr:nth-child(odd)，比 table tr:nth-child(odd) 更可靠
<thead>，<code>:nth-child(odd) 会把表头那行也算作第 1 行，导致第一行数据变成“偶数行”——此时应改用 :nth-of-type()
:nth-of-type(odd) 和 :nth-child(odd) 到底该用哪个？
:nth-of-type() 只统计同类型标签（即 <tr>），自动跳过 <code><thead>、<code><tfoot>、注释等干扰项；<code>:nth-child() 统计所有兄弟节点，更“严格”但也更脆弱。
使用场景判断：
- 纯
<table><tr><td> 结构（无 <code><thead>）→ 两者效果一致，任选 <li>含 <code><thead> 或动态插入 <code><tr> → 必须用 <code>tbody tr:nth-of-type(odd)，否则表头后第一行永远是even - 需要兼容 IE8 及更早版本 → 两个都不可用，得靠 JS 或 class 手动标记（如
class="odd"）
用 CSS 实现隔行变色的最小可靠写法
不依赖 HTML 结构假设，也不引入 JS，最稳妥的组合就是限定作用域 + 类型筛选。
示例（直接可用）：
tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-of-type(even) {
background-color: #ffffff;
}
关键点：
- 必须写
tbody前缀，避免匹配到<thead><tr> <li>用 <code>nth-of-type而非nth-child，绕过 DOM 中隐藏节点干扰 - 不要只设
odd，同时定义even，防止其他样式（如 hover）意外覆盖背景 - 若表格有合并单元格（
rowspan），不影响计数逻辑，但视觉上可能错位——这是语义问题，不是 CSS 错误 - 用
innerHTML += '<tr>...</tr>'→ 可能触发整个<tbody> 重建，导致所有 <code>tr重新排序，视觉闪烁甚至错色 - 插入前没清空旧样式类（如果之前用 JS 加过
class="odd"）→ 新旧逻辑冲突 - 用
document.createElement('tr')但忘了appendChild()到<tbody> → 节点不在文档流中，<code>:nth-of-type根本不匹配复杂点其实在表格嵌套或服务端渲染时的 SSR/CSR 一致性——DOM 生成时机不同，可能导致首屏闪动。这时候就得配合
data-loaded属性做渐进增强，而不是指望纯 CSS 一劳永逸。
JavaScript 动态增删行时，CSS 隔行色会失效吗？
不会失效，但有个前提：新插入的 <tr> 必须 append 到 <code><tbody>，且插入位置不能破坏原有顺序（比如插在中间）。浏览器会实时重算 <code>:nth-of-type()，所以只要结构合法，样式自动生效。
容易踩的坑：
