:nth-child(2n)不生效是因为它按父元素所有子元素排序，而非仅tr元素；混入thead、caption等会干扰序号，应改用:nth-of-type()或包裹tbody后使用tbody tr:nth-child(even)。
为什么 :nth-child(2n) 有时不生效
直接写 tr:nth-child(2n) { background: #f0f0f0; } 却发现偶数行没变色，大概率是因为父容器里混入了其他类型子元素（比如 thead、caption 或注释节点）。:nth-child() 数的是「所有子元素的顺序位置」，不是「第几个 tr」。
常见错误场景：表格含 thead，此时第一个 tr 是 thead > tr，它占了位置 1；真正的第一行数据 tr 实际是第 2 个子元素——所以用 :nth-child(2n) 会选中它，但你以为是“第二行”。
- 检查 DOM 结构，确认目标元素是否连续且类型一致
- 若结构不干净，改用
:nth-of-type()（按同类型元素计数） - 对纯数据表格，确保
tbody显式包裹所有tr，避免浏览器自动补全干扰
:nth-child(odd) 和 :nth-child(even) 的实际行为
它们等价于 :nth-child(2n+1) 和 :nth-child(2n)，但语义更清晰。注意：这里的 odd/even 指的是「元素在父级中的位置序号」，不是数据行号。
例如：div:nth-child(odd) 会匹配父元素下第 1、3、5… 个子元素，且该子元素必须是 div；如果第 1 个子是 p，那它不会被选中，哪怕后面第 2 个是 div。
- 优先用
odd/even提高可读性，除非需要偏移（如从第 3 行开始隔行） - 若需从第 2 行起变色，用
:nth-child(2n+2)，而不是:nth-child(even)—— 后者仍从第 2 个位置开始，但位置未必对应你的“第 2 行数据” - IE8 不支持
odd/even关键字，只认数字公式，需兼容时统一写2n+1形式
表格隔行变色的稳妥写法
最可靠的方式是限定作用域 + 显式结构假设。假设你控制 HTML，推荐这样组织：
| Row 1 |
| Row 2 |
| Row 3 |
然后写：
tbody tr:nth-child(odd) { background: #fff; }tbody tr:nth-child(even) { background: #f9f9f9; }
- 加
tbody前缀能排除thead干扰，让序号从数据行本身开始计算 - 若用 CSS-in-JS 或动态渲染，确保每次插入新
tr都在tbody内，否则新增行可能不触发样式 - 不要依赖
:hover覆盖隔行色时的透明度叠加，直接重置background-color值更可控
性能和可维护性提醒
:nth-child() 是 CSS 运行时计算的，现代浏览器优化得很好，但嵌套过深或配合复杂选择器（如 section div ul li:nth-child(3n+1) a）仍可能触发重排。
- 避免在高频滚动区域（如长列表）中对大量元素使用多个
:nth-child规则 - 如果隔行逻辑后续要改为“每 3 行一组”或“首行特殊”，公式会快速变得难读，此时建议用 JS 添加 class（如
row-0,row-1）更直观 - 设计系统中若需主题化隔行色，别硬编码颜色值，用 CSS 自定义属性：
tr:nth-child(even) { background: var(--zebra-stripe-bg, #f5f5f5); }
真正麻烦的从来不是写对一行 :nth-child，而是当别人往表格里加了个 div 或注释，或者用了 colspan 合并单元格后，样式突然错位——这时候得回过头看 DOM 树，而不是调公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
