:nth-child按父元素所有子元素顺序计数，非同类标签；选第n个同类型元素应使用:nth-of-type；IE8及以下不支持，且DOM变动会导致序号变化样式失效。
为什么 :nth-child 选不到你想要的元素
因为 :nth-child 是按「父元素下所有子元素的顺序位置」计数，不是按「同类标签」或「你视觉上看到的位置」。比如 <div>
<p>A</p>
<span>B</span><p>C</p>
</div> 中，第二个 <p></p> 实际是父元素的第 3 个子元素，p:nth-child(2) 根本不匹配它——因为第 2 个子元素是 <span></span>。
:nth-child(n) 的常见写法和实际效果
括号里的表达式决定匹配哪些序号，n 从 0 开始代入计算：
-
:nth-child(3)→ 只匹配第 3 个子元素（无论标签类型） -
:nth-child(2n)→ 匹配第 2、4、6… 个子元素（偶数位） -
:nth-child(2n+1)→ 匹配第 1、3、5… 个子元素（奇数位） -
:nth-child(3n+2)→ 匹配第 2、5、8… 个子元素（从第 2 位起，每 3 个一跳）
注意：n 是整数，可为负数，但结果序号必须 ≥ 1；:nth-child(-n+3) 等价于「前 3 个子元素」。
想选「第 n 个同类型元素」？别用 :nth-child
这是最常踩的坑。如果你的目标是「第 2 个 <p></p>」，应该用 :nth-of-type：
p:nth-of-type(2) { color: red; }
它只对同标签名的兄弟元素重新编号，不受中间夹杂的其他标签干扰。而 :nth-child 要求「位置 + 标签名」同时满足，条件更严、更难预测。
兼容性和性能要注意什么
:nth-child 在 IE9+ 完全支持，但 IE8 及以下不支持，且无法用 CSS 表达式模拟。性能上它本身无明显开销，但如果在深层嵌套结构中高频使用（如 div div div:nth-child(odd)），可能触发重排或影响渲染速度。更关键的是：它依赖 DOM 结构稳定——一旦 JS 动态插入/删除兄弟节点，序号立刻变化，样式可能意外失效。
真正难处理的，是那些结构不固定、又依赖序号做样式的场景；这时候与其硬套 :nth-child，不如加 class 控制，或者改用 JS 动态标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
