如何通过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

这是最常踩的坑。