:nth-child(-n+3) 能选前三个元素是因为它等价于位置索引≤3的子元素，而非字面计算；它按DOM所有同级子元素统一编号，与:nth-of-type(-n+3)（仅计同类标签）有本质区别。
为什么 :nth-child(-n+3) 能选前三个元素
这个表达式不是字面的“负n加3”，而是 CSS 伪类中预定义的线性公式 an+b 的一种写法。当 a = -1、b = 3 时，-n+3 会依次代入 n = 1, 2, 3...，算出匹配的位置：
n=1 → -1+3 = 2（不匹配第1个）
n=2 → -2+3 = 1（不匹配第1个）
……
但实际浏览器是反向求解：找出所有满足「位置索引 ≤ 3」的 :nth-child() 结果。CSS 规范规定，-n+3 等价于「第1、第2、第3个子元素」——它本质是数学上对前 b 项的简洁描述。
:nth-child(-n+3) 和 :nth-of-type(-n+3) 完全不同
这是最常混淆的点。前者按 DOM 树中所有同级子元素统一编号，后者只计同一标签类型的兄弟节点：
- 如果父容器里有
<div>、<code><p></p>、<div>、<code><span></span>、<div>，那么 <code>div:nth-child(-n+3)只能选中第1个<div>（它是第1个子元素），第3个 <code><div> 是第5个子元素，不匹配 <li>而 <code>div:nth-of-type(-n+3)会对所有<div> 单独编号，选中前三个 <code><div>，不管中间夹着什么其他标签 <li>若目标是「某类元素的前三个」，必须用 <code>:nth-of-type()，否则很可能漏选或错选 - 父元素开头有注释节点或文本节点（比如换行空格），会导致第一个真实元素变成
:nth-child(2)，-n+3就无法命中它 - 动态插入元素后未重排 DOM（如用
innerHTML替换），旧的样式规则可能仍按旧结构计算 - 在 Flex/Grid 容器中，
:nth-child()依然按源顺序匹配，不是按视觉排列顺序——即使你用order调整了显示位置，编号也不变 - IE8 及更早版本完全不支持
:nth-child()，需要 JS 回退（如querySelectorAll+ class 手动添加） - 要选「第1、第3、第5个」，写
:nth-child(2n+1)比逐个列:nth-child(1), :nth-child(3), :nth-child(5)更好；但要选「第1、第2、第4个」，就没通用公式，老老实实写三组选择器更清晰 - Vue/React 中频繁增删列表项，用 CSS 伪类控制状态容易失步，建议改用
v-if或className动态控制 - 想给前三个加背景，后两个加边框？别堆一堆
:nth-child()，用:nth-child(-n+3)+:nth-child(n+4)组合更稳，避免重复覆盖
实际使用时要注意的边界情况
这个选择器对 HTML 结构非常敏感，稍有变动就失效：
替代方案：什么时候不该硬用 -n+3
当逻辑变复杂时，硬套公式反而难维护：
CSS 伪类看着简单，但 -n+3 这种写法背后依赖的是严格的父子关系和纯净的子元素序列。一旦结构里混入注释、文本节点、动态插入或跨浏览器兼容需求，它就不再是“写一次管三年”的银弹。
