:nth-child(even)不生效主因是按父元素所有子节点位置计数，非仅tr；应改用tbody tr:nth-child(even)或更可靠的tr:nth-of-type(even)。
为什么 :nth-child(even) 有时不生效
直接写 tr:nth-child(even) { background: #f5f5f5; } 却发现偶数行没变色？常见原因是父容器里混入了其他元素（比如 thead、caption 或注释节点），导致 :nth-child 按「所有子元素位置」计数，而非仅按 tr 计数。例如：thead 占了第1个子元素，那第一个 tbody tr 就是第2个子元素——它被算作 :nth-child(2)，但若你只给 tbody tr 写样式，它根本匹配不到。
解决办法很直接：
- 确保目标元素是父容器的**连续、同级、无干扰**的子元素；
- 或改用
tbody tr:nth-child(even)显式限定范围； - 更稳妥的是用
tr:nth-of-type(even)——它只看同类型标签（即tr）的顺序，无视中间的thead、tfoot等。
:nth-child(even) 和 :nth-of-type(even) 怎么选
二者行为差异明显：
-
:nth-child(even)：从父元素的第一个子元素开始编号，只要是第2、4、6…个位置，就匹配，不管它是不是tr； -
:nth-of-type(even)：只对同标签名（如tr）单独编号，跳过thead、th、文本节点等，更符合“表格行隔行”的直觉。
实际场景中，带 thead 的表格用 :nth-of-type(even) 几乎不会出错；纯 tbody 且子元素全是 tr 时，两者效果一致。但只要结构稍复杂（比如动态插入 tr 或服务端渲染含注释），:nth-of-type 更可靠。
立即学习“前端免费学习笔记（深入）”；
兼容性与性能要注意什么
:nth-child 和 :nth-of-type 在 IE9+、所有现代浏览器都支持，但 IE8 及以下完全不支持——如果必须兼容 IE8，得用 JS 动态加 class 或后端模板循环判断 index % 2 === 0。
性能上两者无实质差别，都是 CSS 引擎一次性计算伪类匹配，但注意别滥用嵌套：
- 避免写成
table tbody tr:nth-child(even) td这种深层选择器，能提效就提； - 更推荐在
tr上设背景，而不是给每个td单独设，减少重绘面积； - 若表格数据量极大（上千行），CSS 隔行变色本身无性能问题，但滚动卡顿通常来自 DOM 节点过多，此时应考虑虚拟滚动，而非纠结伪类写法。
遇到 z-index 或透明背景导致颜色看不清怎么办
隔行色被盖住，常是因为：
-
tr没设background-clip: padding-box，而border-collapse: collapse下边框会覆盖背景； - 父级
table或tbody设了半透明白色背景，把tr的背景“洗淡”了； -
tr本身有opacity或祖先用了transform创建了新层叠上下文，干扰了背景显示。
最简排查方式：临时加 outline: 2px solid red 到 tr:nth-of-type(even)，确认是否真没命中；再检查 computed styles 里 background-color 是否被覆盖或继承为 transparent。多数时候，删掉无关的 opacity、确保 tr 是层叠上下文边界，就能让颜色正常显现。
