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
BC
-
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…）
