:nth-child(-n+3)选择父元素中序号≤3的所有子元素，与标签类型无关；它按DOM顺序计数，不受CSS布局、order或visibility影响，仅受DOM插入顺序和display:none制约。
伪类 :nth-child(-n+3) 的真实选择逻辑
它选的是“在父元素中位置为第1、第2、第3的子元素”，和元素类型无关，也不管这些子元素是不是你想要的目标标签。很多人以为它能智能挑出前三个 div 或前三个 .item，其实不能——它只数“所有子节点”的序号。
比如父容器里是 <h2></h2>
<p></p>
<div></div>
<span></span><div></div>，那么 :nth-child(-n+3) 匹配的是第1个 h2、第2个 p、第3个 div，而第5个 div 虽然是第二个 div，但位置是5，不匹配。
-
-n+3展开就是：当 n=1 → 2；n=2 → 1；n=3 → 0；所以实际生效的是位置 ≤3 的子元素 - 它和
:nth-of-type()完全不同：:nth-of-type(3)才会找“第3个同类型元素” - 如果中间夹着注释节点或文本节点（比如换行空格），在某些旧版 IE 或严格解析模式下也可能被计入子元素序号
想选前三个 .card 元素？别直接用 :nth-child(-n+3)
除非你能确保所有前三个子元素恰好都是 .card，否则大概率失效。更可靠的做法是结合类名和位置逻辑，或者换思路。
- 如果结构可控（例如父容器下只有
.card）：用.card:nth-child(-n+3)—— 这时它等价于前三个子元素且带.card类 - 如果结构混杂（有标题、分隔线等）：改用
.card:nth-of-type(-n+3)，但注意：这仅在.card是同一种标签（如全是div）时才稳定 - 更稳妥的方案是 JS 辅助：
document.querySelectorAll('.card').slice(0, 3)，避开 CSS 选择器的层级限制
:nth-child(-n+3) 在 Flex/Grid 布局中的表现是否一致？
一致。CSS 伪类的选择发生在布局计算之前，:nth-child() 完全不关心 display 类型，只看 DOM 树中的子元素顺序。Flex 排序、Grid 模板区域重排、order 属性，统统不影响它匹配结果。
立即学习“前端免费学习笔记（深入）”；
- 即使你用
order: -1把某个元素视觉上提到最前，只要它在 HTML 中是第5个子元素，就不会被:nth-child(-n+3)选中 - 同理，Grid 中用
grid-area把元素扔到第一格，也不改变其子元素索引 - 真正影响它的只有 DOM 插入顺序和是否被
display: none隐藏（注意：visibility: hidden不影响）
容易忽略的兼容性与调试陷阱
这个伪类本身支持很广（IE9+），但问题常出在“你以为它在选什么”和“它实际在选什么”的错位上。
- 开发者工具里高亮显示的元素，可能让你误以为规则生效了，其实是其他样式叠加的结果；务必右键检查元素，看 computed 样式里
:nth-child(-n+3)是否真在 match list 中 - 动态插入元素后，序号重算，但已应用的样式不会自动刷新——新插入的第2个子元素不会突然获得该规则样式，除非触发重绘（如 class 变更）
- Sass/Less 编译时若写成
&:nth-child(-n + 3)（带空格），部分老版本编译器会报错或静默失败，必须写成&:nth-child(-n+3)
真正难的不是写对这个伪类，而是确认父容器里子元素的构成和顺序是否如你所想——打开开发者工具，把鼠标悬停在父元素上，逐个数一遍子节点，比查文档还管用。
