17370845950

nth-child选择器按子元素位置匹配，不区分类型；语法为selector:nth-child(n)，n为正整数或表达式（如2n、2n+1、-n+5等）；区别于nth-of-type，后者只计同类元素。

用 nth-child 选择器可以精准匹配父元素下的第 n 个子元素，但要注意它只认“位置”，不区分元素类型。

基础写法：指定第 n 个子元素

语法是 selector:nth-child(n)，其中 n 是正整数（从 1 开始计数）。

• li:nth-child(3) → 选中父容器里**位置排第 3 的 li 元素**（前提是它确实是第 3 个子元素）
• 如果第 3 个子元素是
  ，那这条规则不会生效

常用模式：不只是固定数字

n 可以是表达式，实现批量匹配：

• li:nth-child(2n) → 所有偶数位置的 li（2、4、6…）
• li:nth-child(2n+1) → 所有奇数位置的 li（1、3、5…）
• li:nth-child(3n) → 每隔 2 个选 1 个（3、6、9…）
• li:nth-child(3n+2) → 从第 2 个开始，每 3 个一循环（2、5、8…）

注意：nth-child 和 nth-of-type 的区别

nth-child 看的是“第几个子节点”，nth-of-type 看的是“第几个同类型元素”：

• HTML：

  A

  B

  C

• p:nth-child(2) → 不匹配（第 2 个子元素是 ）
• p:nth-of-type(2) → 匹配 C（它是第 2 个
  ）

实用技巧：跳过前几个再开始计数

用 -n + 数字 可以实现“从第 N 个起生效”：

• li:nth-child(-n+5) → 匹配前 5 个 li（n=1 到 5 时，-n+5 ≥ 1）
• li:nth-child(n+4) → 从第 4 个开始往后全部匹配（n=4,5,6…）