:nth-child(2n) 不生效的根本原因是它按父元素所有子元素序号计算，而 tbody 中的 tr 在 table 下序号不连续；应改用 tbody > tr:nth-child(odd) 或 tbody tr:nth-of-type(odd) 确保准确匹配。
为什么 :nth-child(2n) 有时不生效？
表格隔行换色最常见写法是 tr:nth-child(2n) { background: #f5f5f5; }，但实际常发现偶数行没变色。根本原因是 :nth-child 计算的是父元素下的所有子元素序号，而 thead 和 tbody 里的 tr 是分开计数的。比如表头有 1 行、数据有 10 行，那么 tbody 中第一个 tr 是整个 table 的第 2 个子元素，但它在 tbody 内是第 1 个 —— :nth-child(2n) 在 tbody 里匹配的是第 2、4、6…个 tr，不是你想要的“数据行第 2、4、6 行”。
- 确保目标
tr直接位于tbody下（避免嵌套div或其他非tr元素打乱序号） - 不要对整个
table写tr:nth-child(2n)，应限定作用域：写成tbody tr:nth-child(2n) - 如果用了
caption、colgroup等，它们也会被计入:nth-child的计数，进一步偏移
tbody tr:nth-child(odd) 和 even 哪个更稳？
用 odd/even 比 2n/2n+1 更直观，但稳定性取决于结构是否干净。只要 tbody 下只有 tr，二者等价；一旦混入注释、空格文本节点（比如换行缩进），:nth-child 就可能失效 —— 因为文本节点也算子元素。
- 推荐始终写
tbody > tr:nth-child(odd)（加 > 确保直系子元素） - 若担心 HTML 模板渲染出空白文本节点，改用
tbody tr:nth-of-type(odd)：它只统计同类型（tr）元素，无视其他节点 - 注意：
nth-of-type在 IE8 及更早版本不支持，如需兼容就只能清理 DOM 结构或用 JS fallback
如何让表头也参与隔行？
默认表头 thead tr 和数据 tbody tr 是分离的，想实现“整表统一隔行”（比如第 1 行表头白、第 2 行数据灰、第 3 行数据白……），:nth-child 本身做不到跨区域连续编号。
- 最可靠方式：给所有
tr手动加 class，比如后端/JS 渲染时标记class="row-1"、class="row-2"，再用.row-even { background: #f9f9f9; } - 纯 CSS 方案有限：可尝试把
thead和tbody合并（即不用语义化标签，全用tr），但会牺牲可访问性和 SEO - 不推荐用
table tr:nth-child(2n)并祈祷表头只占 1 行 —— 一旦增加多行表头或 footer，样式立刻错乱
移动端或动态表格要注意什么？
表格内容由 JS 动态插入（如 React/Vue 渲染、AJAX 加载）时，:nth-child 规则仍生效，但容易因 DOM 更新时机导致闪烁或错位。
- 避免在 JS 中反复
innerHTML = ...替换整个tbody，这会让浏览器重新计算所有子元素序号，动画不连贯 - 若用
insertRow()或append()新增tr，确保新增顺序与视觉顺序一致；否则nth-child(3)可能指向错误行 - Safari 对
:nth-child在 fragment 插入后的重计算偶有延迟，可加force reflow（如读取offsetHeight）触发重绘，但通常没必要
真正麻烦的不是怎么写那行 CSS，而是你得确认那一行 CSS 到底作用在谁身上、按什么顺序数的。表格结构越复杂，越容易掉进序号陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
