17370845950

:nth-child(n) 是按DOM位置序号匹配子元素的选择器，需同时满足“第n个位置”和“目标标签”双重条件；与:nth-of-type不同，它计数所有子元素而非仅同类元素。

:nth-child(n) 是 CSS 中用于精确定位父元素下第 n 个子元素的选择器，它不关心元素类型，只按 DOM 树中的位置序号匹配。

基础用法：选中固定序号的项

直接写数字即可选中对应位置的子元素。例如：

• li:nth-child(1) → 选中第一个
• （且该
• 恰好是父元素的第一个子元素）
• li:nth-child(3) → 选中第三个子元素，且这个子元素必须是

⚠️ 注意：如果第 n 个子元素不是目标标签（比如是

或文本节点），则不会被选中 —— :nth-child 匹配的是“位置 + 标签”双重条件。

常见模式：选中偶数、奇数、倍数项

使用关键词或公式更灵活：

• li:nth-child(odd) → 选中第 1、3、5… 个
• li:nth-child(even) → 选中第 2、4、6… 个
• li:nth-child(3n) → 选中第 3、6、9… 个
• （3 的倍数）
• li:nth-child(3n+1) → 选中第 1、4、7… 个
• li:nth-child(3n+2) → 选中第 2、5、8… 个

与 :nth-of-type 的关键区别

:nth-child(n) 数的是所有子元素的顺序；:nth-of-type(n) 只数同类型元素的顺序。

例如父容器内为：

A

B

• li:nth-child(2) ✅ 匹配 “A”，因为
• A
是第二个子元素
• li:nth-child(1) ❌ 不匹配任何
• ，因为第一个子元素是

• li:nth-of-type(1) ✅ 匹配 “A”，它是第一个
• （忽略中间的
  ）

实用技巧：避开常见陷阱

实际使用时容易出错，注意以下几点：

• 确保父元素结构稳定，子元素顺序变化会直接影响匹配结果
• 空白文本节点（如换行、缩进）在旧版 IE 中可能被算作子元素，影响序号计算
• 想只针对某类元素做循环样式（如隔行变色），优先考虑 :nth-of-type 或给列表加统一 class 后用 :nth-child
• 可配合伪类组合使用，例如 li:nth-child(2):hover 表示仅对第二个列表项生效的悬停效果