:nth-child(2n)不生效的主因是它按所有子元素位置计数，不区分标签类型；若目标元素前有其他类型兄弟节点（如<h3>、<p>），其序号会偏移，应改用:nth-of-type(2n)或结合class控制。
为什么 :nth-child(2n) 有时不生效？
常见原因是目标元素不是父容器的直接子元素，或者前面有其他类型兄弟节点（比如 <h3>、<p>）。:nth-child 计数的是所有子元素的位置序号，不区分标签名。例如父元素下顺序为 <h3>、<div>、<div>，那么第一个 <div> 实际是第 2 个子元素，div:nth-child(2n) 就会从它开始匹配，而非视觉上“第一个条目”。
- 确保你要样式化的元素在 DOM 中连续且类型一致，或改用
:nth-of-type - 如果结构不可控，优先用
:nth-of-type(2n)—— 它只计算同类型兄弟元素 - 调试时可在浏览器开发者工具中右键检查元素，看“Styles”面板是否显示该伪类被应用或被覆盖
:nth-child(odd) 和 :nth-child(even) 的实际写法差异
两者语义清晰，但底层计算逻辑相同：odd 等价于 2n+1，even 等价于 2n。区别在于可读性和维护性——尤其当需要从第 3 行开始交替时，:nth-child(2n+3) 比 :nth-child(odd) 更明确。
-
tr:nth-child(odd)→ 第 1、3、5… 行（常用于表格） -
li:nth-child(even)→ 第 2、4、6… 项（注意：若<li>前有<ul>内其他元素，序号可能偏移） - 避免混用
odd和2n+1在同一选择器组里，易引发理解偏差
实现真正“视觉条纹”的安全写法
仅靠 :nth-child 不足以应对复杂 DOM 结构。更鲁棒的做法是结合 class 控制，或用 JS 动态添加 row-odd/row-even 类。但若坚持纯 CSS，推荐以下组合：
tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-of-type(even) {
background-color: #ffffff;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
- 限定在
tbody内，排除thead干扰 - 用
:nth-of-type避免tr前插入注释、空格文本节点或其它标签的影响 - 显式设置两个状态的背景色，防止继承或透明穿透
移动端或高对比度模式下的兼容性注意点
:nth-child 本身支持所有现代浏览器（包括 iOS Safari 3.2+、Android Browser 2.1+），但问题常出在渲染层：某些旧版 WebView 对伪类重绘不及时，或高对比度系统强制覆盖背景色。
- 不要依赖背景色传递关键信息（如错误/成功状态），需叠加图标或文字标识
- 测试时开启系统级“增加对比度”或“粗体文本”，观察是否仍可辨识条纹
- 若需降级，可用
tr:first-child+tr:nth-child(2)等硬编码方式兜底，但仅适用于固定行数场景
最易被忽略的是：当表格或列表内容为空时，:nth-child 依然按位置匹配，可能导致“空白条纹”错位。此时应配合 :has()（如支持）或服务端/JS 预判空状态并移除相关 class。
