:nth-child(even)没生效主因是父元素含非tr子元素（如thead），它按所有子元素物理位置计数；应改用tbody tr:nth-of-type(even)或JS加class兼容。
为什么 :nth-child(even) 有时没生效？
直接写 tr:nth-child(even) { background: #f5f5f5; } 却看不到斑马纹，大概率是因为父元素里混入了其他类型子元素（比如 thead、caption 或注释节点）。:nth-child() 数的是**所有子元素的物理位置**，不是“第几个 tr”。比如：thead 占了前 2 行，那第一个 tbody tr 实际是第 3 个子元素，不满足 even。
- 只对纯
tr列表（如无thead的简单表格）或已用tbody显式包裹的tr有效 - 若含
thead，优先改用tbody tr:nth-child(even)或更稳妥的tbody tr:nth-of-type(even) - 注意：IE8 不支持
:nth-child()，需降级方案（如 JS 添加 class）
:nth-child(odd) 和 :nth-child(even) 的行为差异
两者本质是同一套公式计算：:nth-child(an+b)。其中 odd 等价于 (2n+1)（即第 1、3、5…个），even 等价于 (2n)（即第 2、4、6…个）。关键点在于起始值 n 从 0 开始代入：
-
:nth-child(2n)→ n=0→第 0 个？不成立；n=1→第 2 个；n=2→第 4 个……所以实际匹配第 2、4、6… -
:nth-child(2n+1)→ n=0→第 1 个；n=1→第 3 个；以此类推 - 别写成
:nth-child(odd+1)——语法错误，odd和even是关键字，不能加运算符
真正可靠的斑马纹写法（兼容混合结构）
面对带 thead、tfoot 的标准表格，:nth-child() 容易错位。此时应切换到语义化更强的选择器：
- 用
tbody tr:nth-of-type(even)：它只统计同类型（tr）兄弟元素，无视thead干扰 - 或显式限定作用域：
table tbody tr:nth-child(even)（前提是tbody存在且tr是其直接子元素） - 如果要兼容旧浏览器，CSS 里补一句
tr:nth-child(even) { background: #f9f9f9; }，再用 JS 在不支持的环境里给偶数tr加class="even"
tbody tr:nth-of-type(even) {
background-color: #f8f9fa;
}
tbody tr:nth-of-type(odd) {
background-color: #ffffff;
}
容易被忽略的细节：伪类与 DOM 结构强绑定
斑马纹效果会随 DOM 动态增删实时变化——这不是 bug，是预期行为。比如用 JS 插入一个新 tr 到中间，后续所有 tr 的序号重算，颜色立刻翻转。这在分页/筛选场景下可能造成视觉跳跃。
立即学习“前端免费学习笔记（深入）”；
- 若需“稳定序号”（比如第 2、4、6 条永远灰色），必须放弃
:nth-系列，改用 JS 渲染时按数据索引添加class="row-2 row-4"等固定类名 -
:nth-child()不匹配通过display: none隐藏的元素，但匹配visibility: hidden的——隐藏行仍参与计数 - Flex/Grid 容器中也能用
:nth-child()，但要注意：它数的是 DOM 顺序，不是视觉顺序（比如flex-direction: column-reverse下，第一个显示的项可能是最后一个子元素）
