:nth-child(2n)严格按父元素所有同级子元素的物理序号匹配第2、4、6…个位置的元素，不区分标签类型；若目标位置元素类型不符则不生效，混入其他节点易导致错位，此时应改用:nth-of-type(2n)。
什么是 :nth-child(2n) 的实际匹配逻辑
:nth-child(2n) 并不是“选偶数序号的子元素”这么简单——它严格按 DOM 树中**同级子元素的物理顺序**计数，且只匹配那些**恰好位于第 2、4、6… 个位置**的元素，不管它们的标签名或类型是否一致。
常见误解是以为它能跳过非目标标签（比如只对 <p></p> 计数），但其实不会：只要在父容器下是第 2 个子节点，哪怕它是 <div> 或 <code><span></span>，也会被选中。
为什么有时 :nth-child(2n) 没生效
最常踩的坑是混淆了 :nth-child() 和 :nth-of-type()：
-
:nth-child(2n)看的是“第几个子元素”，位置必须严格连续 -
:nth-of-type(2n)看的是“第几个同类型元素”，会跳过其他标签
比如父元素内结构是：<h2></h2>
<p>1</p>
<div></div>
<p>2</p>，那么：
-
p:nth-child(2n)→ 不匹配任何<p></p>，因为第一个<p></p>是第 2 个子元素（满足 2n），但第二个<p></p>是第 4 个子元素（也满足），所以它其实会命中两个<p></p>—— 但前提是写法是p:nth-child(2n)，而不是:nth-child(2n)（后者没有限定标签，会选中所有第 2/4/6… 位的子元素） - 更安全的写法通常是
p:nth-child(2n)或div:nth-child(2n)，明确限定元素类型
如何正确写出偶数行样式（实用写法）
多数时候你想要的是“表格偶数行变色”或“列表偶数项加背景”，直接用下面这几种之一即可：
- 给所有偶数位置的
<li>加背景：li:nth-child(2n) { background: #f5f5f5; } - 等价写法（更直观）：
li:nth-child(even) { background: #f5f5f5; } - 如果父容器里混有注释、文本节点或其它标签，
:nth-child仍按总序号算 —— 这时改用:nth-of-type(2n)更鲁棒，例如：li:nth-of-type(2n) { ... }
注意：2n 中的 n 从 0 开始代入，即生成 0, 2, 4, 6…，对应第 2、4、6… 个位置（DOM 索引从 1 起）。
:nth-child(2n) 在 Flex/Grid 布局中还管用吗
管用，但要注意：CSS 伪类作用于 DOM 结构，和布局方式无关。即使子元素用 display: flex 或 grid 排列，:nth-child(2n) 依然按 HTML 源码中的子元素顺序匹配。
不过有个隐藏陷阱：
- 如果用了
order属性调整视觉顺序，:nth-child()**完全不感知**，它永远按源码顺序数 - 想按视觉顺序选偶数项？做不到 —— CSS 伪类无法读取
order或渲染后位置，只能靠 JS 动态加 class
所以别指望 :nth-child(2n) 能响应重排后的“偶数显示项”，它只忠于 HTML 结构本身。
