:nth-child(2n)不生效的主因是它按所有子元素位置计数，不区分标签类型；若目标元素前有其他类型兄弟节点（如、），其序号会偏移，应改用:nth-of-type(2n)或结合class控制。
为什么 :nth-child(2n) 有时不生效？
常见原因是目标元素不是父容器的直接子元素，或者前面有其他类型兄弟节点（比如
、
）。:nth-child 计数的是所有子元素的位置序号，不区分标签名。例如父元素下顺序为
、
、
，那么第一个
实际是第 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… 项（注意：若
前有
内其他元素，序号可能偏移）
- 避免混用
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。