:nth-child(2n) 不生效是因为它按父元素所有子元素序号计数，非仅目标标签；应确保结构纯净、用 :nth-of-type 或 odd/even，避免内联样式干扰，动态内容需手动补类。
为什么 :nth-child(2n) 有时不生效？
直接写 tr:nth-child(2n) { background: #f0f0f0; } 看似合理，但常发现偶数行没变色——根本原因是 :nth-child 计数的是父元素下的**所有子元素序号**，不是“第几个 tr”。如果表格里有 thead、tbody、或者混入了 th、div 等其他标签，序号就乱了。
实操建议：
- 确保目标元素是父容器下连续、无干扰的同级元素（比如把所有
tr都放在同一个tbody里） - 用浏览器开发者工具检查元素实际的
:nth-child()序号：右键 → “检查”，看它在父节点中的位置索引 - 若结构无法调整，改用
:nth-of-type(2n)—— 它只计同类型标签（如只数tr），更鲁棒
:nth-child(odd) 和 :nth-child(even) 哪个更安全？
二者语义清晰，且不依赖具体数字计算，比 2n / 2n+1 更少出错。但注意：odd 对应 1, 3, 5…（即第 1 行起变色），even 对应 2, 4, 6…（第 2 行起）——视觉效果取决于你希望首行是否高亮。
常见场景选择：
立即学习“前端免费学习笔记（深入）”；
- 列表/表格默认隔行，首行浅色、次行深色 → 用
:nth-child(odd) { background: #fff; }+:nth-child(even) { background: #f9f9f9; } - 想让第 2、4、6 行统一变色（比如标出审核中条目）→ 直接用
:nth-child(even) - 不要混用
odd和2n+1，它们等价，但风格统一更好维护
如何避免伪类被内联样式或 !important 覆盖？
CSS 优先级规则下，:nth-child() 生成的选择器权重和普通类名一样（a=0, b=0, c=1），远低于内联样式（a=1, b=0, c=0）或带 !important 的声明。结果就是：哪怕写了 tr:nth-child(even) { background: red !important; }，如果某行有 style="background: blue"，依然显示蓝色。
解决办法很实在：
- 删除模板中给
tr加的内联style属性（后端渲染或 JS 插入时尤其容易漏） - 用
[style]选择器临时清除：例如tr[style] { background: inherit !important; }，再让:nth-child生效 - 真要兼容旧代码，把隔行色逻辑提到 JS 里用 class 控制（如
row-even），避开优先级纠缠
移动端或动态加载内容时，:nth-child 还管用吗？
管用，但有个隐藏前提：元素必须已存在于 DOM 中。如果用 JS 动态插入新 tr（比如分页加载、搜索过滤），新行不会自动继承样式——因为 :nth-child 是静态匹配，不监听 DOM 变化。
应对方式取决于加载模式：
- 整页重绘（如 Vue/React 列表重新 render）→ 没问题，新 DOM 重建后自然匹配
- 纯 JS
appendChild追加单行 → 新行序号可能错位（比如原 10 行，新增第 11 行，但父容器里还有其他节点），此时:nth-child计算失效 - 稳妥做法：插入后手动补 class，例如
newTr.classList.toggle('row-even', index % 2 === 0)
真正容易被忽略的点是：隔行色本质是视觉节奏控制，而不是技术炫技。结构一复杂，别硬扛 :nth-child，该用 class 就用 class。
