:nth-child(n) 是按DOM位置序号匹配子元素的选择器，需同时满足“第n个位置”和“目标标签”双重条件；与:nth-of-type不同，它计数所有子元素而非仅同类元素。
:nth-child(n) 是 CSS 中用于精确定位父元素下第 n 个子元素的选择器，它不关心元素类型，只按 DOM 树中的位置序号匹配。
基础用法：选中固定序号的项
直接写数字即可选中对应位置的子元素。例如：
-
li:nth-child(1)→ 选中第一个<li>（且该<li>恰好是父元素的第一个子元素） -
li:nth-child(3)→ 选中第三个子元素，且这个子元素必须是<li>
⚠️ 注意：如果第 n 个子元素不是目标标签（比如是 <p></p> 或文本节点），则不会被选中 —— :nth-child 匹配的是“位置 + 标签”双重条件。
常见模式：选中偶数、奇数、倍数项
使用关键词或公式更灵活：
立即学习“前端免费学习笔记（深入）”；
-
li:nth-child(odd)→ 选中第 1、3、5… 个<li> -
li:nth-child(even)→ 选中第 2、4、6… 个<li> -
li:nth-child(3n)→ 选中第 3、6、9… 个<li>（3 的倍数） -
li:nth-child(3n+1)→ 选中第 1、4、7… 个<li> -
li:nth-child(3n+2)→ 选中第 2、5、8… 个<li>
与 :nth-of-type 的关键区别
:nth-child(n) 数的是所有子元素的顺序；:nth-of-type(n) 只数同类型元素的顺序。
例如父容器内为：<p></p>
<li>A</li>
<li>B</li>
-
li:nth-child(2)✅ 匹配 “A”，因为<li>A</li>是第二个子元素 -
li:nth-child(1)❌ 不匹配任何<li>，因为第一个子元素是<p></p> -
li:nth-of-type(1)✅ 匹配 “A”，它是第一个<li>（忽略中间的<p></p>）
实用技巧：避开常见陷阱
实际使用时容易出错，注意以下几点：
- 确保父元素结构稳定，子元素顺序变化会直接影响匹配结果
- 空白文本节点（如换行、缩进）在旧版 IE 中可能被算作子元素，影响序号计算
- 想只针对某类元素做循环样式（如隔行变色），优先考虑
:nth-of-type或给列表加统一 class 后用:nth-child - 可配合伪类组合使用，例如
li:nth-child(2):hover表示仅对第二个列表项生效的悬停效果
