:nth-child(2n)不生效是因为它匹配所有子元素的序号而非同类型元素序号；表格中应优先用tbody tr:nth-child(even)或tr:nth-of-type(even)。
为什么 :nth-child(2n) 有时不生效
直接写 tr:nth-child(2n) { background: #f0f0f0; } 却发现偶数行没变色？常见原因是父容器里混入了其他类型子元素（比如 <thead>、<caption>，甚至注释或空格文本节点）。:nth-child 数的是「所有子元素的顺序位置」，不是「同类型元素的序号」。例如：<tbody> 下第一个 <tr> 如果是第 3 个子节点，那它就匹配 :nth-child(3)，而非 :nth-child(1)。
实操建议：
- 确保目标元素是其父容器下**连续、无干扰**的子元素；表格场景优先用
tbody tr:nth-child(odd)或tbody tr:nth-child(even) - 若结构复杂，改用
:nth-of-type()更稳妥——它只计同类型标签，忽略其他节点 - 调试时在浏览器开发者工具中右键检查元素，看「Elements」面板里该元素实际排在父节点下的第几个位置
odd 和 even 比 2n+1 更安全吗
语义上等价，但行为有细微差别：odd 等价于 2n+1，even 等价于 2n。问题出在解析兼容性上：极老版本 Safari（2n+1 的支持不稳定，而 odd/even 作为关键字更早被广泛支持。不过现在绝大多数项目已无需考虑这些旧环境。
当前推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 追求可读性和维护性 → 用
odd/even - 需要动态计算（比如每 3 行高亮第 2 行）→ 必须用函数式写法，如
:nth-child(3n+2) - 避免手误：别写成
2n+0（应写2n），也别漏掉括号，:nth-child 2n是无效语法
表格隔行换色必须用 :nth-child 吗
不一定。CSS 提供了更语义化、容错更强的替代方案：
-
tbody tr:nth-of-type(odd)：跳过<thead>、<tfoot>等非tr节点，按tr标签自身顺序计数，适合大多数真实表格 - CSS 自定义属性 +
:is()组合（现代浏览器）：tr:is(:nth-of-type(odd), .highlight) { background: #eef9ff; }，便于后期叠加人工标记行 - 如果表格数据由 JS 渲染，也可在生成时直接加
class="row-odd"，规避 CSS 选择器局限
注意：:nth-of-type 对伪元素（如 ::before）无效，且无法跨父子层级计数。
移动端或 flex 容器里 :nth-child 表现异常怎么办
Flex 布局中，:nth-child 依然按 DOM 顺序工作，但视觉顺序可能被 order 属性打乱。例如一个 div 的 order 设为 -1，它会显示在最前，但仍是第 3 个子元素 —— 此时 :nth-child(1) 不会选中它。
应对方式：
- 视觉顺序依赖
order时，放弃用:nth-child控制样式，改用显式 class（如first-visual）配合 JS 更新 - 纯展示型 flex 列表（如图标网格），可用
:nth-child(-n+3)选前 3 个，但需确认 DOM 顺序与预期一致 - 避免在
display: contents容器内使用:nth-child—— 它会让子元素“脱离文档流”，导致计数失效
真正容易被忽略的点：隔行色在打印样式表（@media print）中常被遗忘，而用户可能正需要清晰的纸质表格。记得同步定义 @media print { tr:nth-child(even) { background: transparent !important; } }。
