:nth-child(2n)不生效是因为按父元素所有子元素物理序号计数，thead、caption等干扰导致tbody内tr序号错位；应限定为tbody tr:nth-child(2n)确保准确匹配。
为什么 :nth-child(2n) 有时不生效？
表格里写 tr:nth-child(2n) { background: #f5f5f5; } 却没变色，大概率是因为 thead 或 tbody 干扰了序号计算。浏览器把 tr 放在 table 下时，:nth-child 是按它在父元素里的物理位置数的——如果表头是 thead > tr，那第一个 tbody > tr 实际是第 2 个子元素（第 1 个是 thead），序号就错乱了。
- 直接对
table tr使用:nth-child前，先检查 DOM 结构：用浏览器开发者工具看tr是否都平级挂在table下 - 更稳妥的做法是限定作用域：
tbody tr:nth-child(2n)，确保只数tbody内部的tr - 如果用了
caption、多个thead或tfoot，它们都会计入父元素的子元素总数，进一步偏移序号
:nth-child(odd) 和 :nth-child(even) 哪个更安全？
:nth-child(odd) 比 :nth-child(2n) 更直观，但两者在语义和兼容性上完全等价（IE9+ 都支持）。真正影响效果的是选择器的匹配目标是否一致：
-
tbody tr:nth-child(odd)匹配tbody中第 1、3、5… 个tr -
tbody tr:nth-child(even)匹配第 2、4、6… 个 - 不要混用：
tr:nth-child(odd)和tr:nth-child(even)同时写在同一个规则块里，会导致后者覆盖前者（CSS 层叠规则） - 若表格有分组行（如
tr.group-header），这些行也参与计数，可能让数据行的奇偶性错位；此时应改用:nth-of-type或加 class 控制
如何兼容带表头固定、虚拟滚动的表格？
原生 :nth-child 依赖真实 DOM 顺序，但在虚拟滚动（如 react-window、vue-virtual-scroller）或 sticky header 场景下，DOM 被动态裁剪或重复渲染，tr 的物理位置不再连续，伪类会失效。
- 纯 CSS 方案在此类场景基本不可靠，必须配合 JS：给每行加
data-row-index="0"，再用属性选择器tr[data-row-index="0"], tr[data-row-index="2"] - 或直接用 class：
tr.zebra-even/tr.zebra-odd，由渲染逻辑控制 - 如果只是 sticky header（
thead固定、tbody滚动），只要保证tbody tr是连续的，:nth-child依然有效
斑马纹看着简单，但一旦表格结构复杂或引入框架抽象，:nth-child 就容易变成“看起来写了，实际没起作用”的隐形坑——关键不是记公式，而是每次写之前，先看一眼 DevTools 里那些 tr 真正在哪个 parent 下、排第几个。
立即学习“前端免费学习笔记（深入）”；
