如何通过HTML的:nth-child选择器定位特定顺序的子元素？

本文共计605个文字，预计阅读时间需要3分钟。

由于 `nth-child` 是按照父元素下所有子元素的顺序位置进行计数，而不是按照同类标签的顺序或视觉上的位置进行计数，因此：

: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>」，应该用 :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 动态标记。