: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 class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<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
当逻辑变复杂时，硬套公式反而难维护：
-n+3 这种写法背后依赖的是严格的父子关系和纯净的子元素序列。一旦结构里混入注释、文本节点、动态插入或跨浏览器兼容需求，它就不再是“写一次管三年”的银弹。
