:nth-child(-n+3)能选中前三个元素，因其数学逻辑为对位置n代入-n+3≥0，n=1、2、3时成立，n≥4时不成立；但存在性能、可读性及静态匹配无法响应DOM动态变化等问题。
为什么 :nth-child(-n+3) 能选中前三个元素？
这个伪类的数学逻辑是：对每个子元素的位置 n（从 1 开始计数），代入表达式 -n + 3，只要结果 ≥ 0，该元素就被匹配。所以当 n = 1 时，-1 + 3 = 2 ≥ 0；n = 2 → 1 ≥ 0；n = 3 → 0 ≥ 0；而 n = 4 → -1 ，不匹配。它本质是“位置 ≤ 3”的等价写法。
注意：:nth-child() 检查的是父容器下的**所有子元素顺序位置**，不是仅限于同类型标签。如果列表里混有 <div>、<p> 或注释节点，它们也会计入位置编号。
:nth-child(-n+3) 和 :nth-of-type(-n+3) 的关键区别
前者按 DOM 顺序无差别计数，后者只统计**同标签名**的兄弟元素。比如一个 <ul> 中前两个 <li> 前面插了个 <div>：
ul > div ul > li ← 位置 2 ul > li ← 位置 3 ul > li ← 位置 4
此时 :nth-child(-n+3) 会匹配 <div>（位置 1）、第二个 <li>（位置 2）和第三个 <li>（位置 3），共三个元素——但你可能只想要 <li>。这时候应该用 :nth-of-type(-n+3)，它只给 <li> 单独编号，稳稳选中前三个 <li>。
立即学习“前端免费学习笔记（深入）”；
- 要精确控制某类标签（如所有
<li>），优先用:nth-of-type() - 要基于完整 DOM 结构做分块样式（如“每组前三个子元素加边框”），才用
:nth-child() - IE8 不支持这两种伪类，需用 JS 或额外 class 回退
常见误用场景与调试建议
最常踩的坑是预期选中“前三个 <li>”，结果样式出现在了意外元素上——大概率是因为父容器里存在隐藏节点或非目标标签。
- 用浏览器开发者工具检查元素的「实际位置序号」：右键 → “检查”，看它在父节点
childNodes中的索引 - 确认没有空格/换行生成的
Text节点干扰（尤其在使用 Pug、JSX 或模板字符串时） - 若需兼容旧项目，可改用显式 class：
<li class="first">、<li class="second">等，配合.first, .second, .third { ... } -
:nth-child(3n)是每 3 个一循环，而:nth-child(-n+3)是固定截断，别混淆两者用途
性能与可维护性提醒
:nth-child(-n+3) 本身无性能问题，但过度嵌套或搭配复杂选择器（如 section > ul > li:nth-child(-n+3) a:hover）会拖慢重排重绘。更麻烦的是可读性——-n+3 这种写法对新人不直观。
现代项目中，如果只是简单前 N 项样式，直接写成 :nth-child(1), :nth-child(2), :nth-child(3) 反而更直白、易搜索、易修改。只有当 N 较大（如前 10 项）或动态生成时，才值得用公式写法。
真正容易被忽略的是：这个选择器无法响应元素增删后的自动重算——它只在渲染时静态匹配一次。如果后续用 JS 插入新元素到开头，原第 1–3 项会变成第 2–4 项，样式就错位了。这时候得靠 JS 控制 class 或重设样式逻辑。
