nth-child(even)不生效的主因是dom中存在thead、tfoot或display:none的tr导致序号偏移；应改用tbody tr:nth-of-type(even)确保仅统计tr标签，或通过开发者工具验证父容器与选择器匹配性。
为什么 nth-child(even) 有时不生效？
直接写 tr:nth-child(even) { background: #f5f5f5; } 却发现隔行变色错位，常见原因不是选择器写错，而是表格里混入了 thead、tfoot 或隐藏的 tr（比如用 display: none 的行）。nth-child 是按 DOM 顺序数的，不是按可见 tr 数的。
- 如果表格有
thead，第一行tr是表头，它占了第1个位置，导致后续tbody里的tr序号整体偏移 - 解决办法：给
tbody tr单独加样式，即用tbody tr:nth-child(even) - 更稳妥的做法是用
tbody tr:nth-of-type(even)，它只统计同类型标签（tr），不受thead干扰
nth-child(odd) 和 nth-child(even) 的实际差异
两者语义清晰，但行为完全取决于起始计数。假设 tbody 下有 5 行数据：
-
tr:nth-child(odd)匹配第 1、3、5 行（序号为奇数） -
tr:nth-child(even)匹配第 2、4 行（序号为偶数） - 注意：如果第一行是
thead，那tbody第一行其实是整个table的第2个tr，此时nth-child(even)会命中它——这就是错位根源
兼容性与现代替代方案：要不要用 nth-of-type？
nth-of-type 在 IE9+ 和所有现代浏览器都支持，和 nth-child 语法一致，但逻辑更贴近“用户预期”。它只看同级中同类标签的顺序，忽略其他标签干扰。
- 推荐写法：
tbody tr:nth-of-type(even) { background-color: #f9f9f9; } - 如果必须支持 IE8，就只能用 JS 动态加 class，或手动给每行加
class="even"/class="odd" - 性能上无差别，两者都是 CSS 引擎原生处理，无需 JS 参与
遇到 :nth-child 不生效时的快速排查步骤
别急着重写 CSS，先确认三件事：
- 打开开发者工具，选中目标
tr，看它的父元素是否真的是你写的那个选择器所匹配的容器（比如误写了table tr却忘了tbody） - 检查是否有内联
style或更高优先级规则（如!important）覆盖了背景色 - 运行
document.querySelectorAll('tbody tr')和document.querySelectorAll('tbody tr:nth-child(even)')，对比数量是否合理——若后者数量异常少，说明序号被干扰了
斑马纹本质是视觉节奏控制，关键不在“怎么写”，而在“写给谁”。盯住具体作用域，比记住公式更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
