:nth-child(-n+3)常失效是因为它按父容器所有子节点（含文本、注释等）计数，而非仅目标标签；应优先用:nth-of-type(-n+3)或JS筛选。
它能选前三个，但只在结构干净、无干扰节点时才可靠；多数情况下你真正需要的是 :nth-of-type(-n+3) 或 JS 配合 document.querySelectorAll()。
为什么 :nth-child(-n+3) 常常“选不到”前三个目标元素
它不是按「第几个目标标签」计数，而是按「父容器里第几个子节点」计数——包括 <div>、<p>、注释、文本节点（比如换行空格）都算在内。
- 父容器是
<ul><li>A</li><div>广告</div><li>B</li><li>C</li></ul>，那么li:nth-child(-n+3)只匹配第一个<li>（位置1），<div>占了位置2，第二个<li>是位置3 → 它被选中，第三个<li>是位置4 → 不匹配 - 即使你用
display: none隐藏了中间的干扰项，它的 DOM 位置不变，:nth-child()依然会把它计入序号 - 开发者工具里高亮显示，不等于规则真的生效了；要右键检查元素，看 computed 样式里是否真有该选择器的样式应用
:nth-of-type(-n+3) 才是更接近“前三个同类型元素”的解法
它只统计同标签名的兄弟节点，自动跳过 <div>、<span>、注释等干扰项，更适合真实项目中的混排结构。
- 适用场景：列表中穿插标题、分隔线、广告位，但你想稳稳选中前三个
<article>或前三个<li> - 限制：不支持伪元素（如
::before），也不识别 Vue/React 的自定义组件标签（如<card>在未渲染为真实 DOM 标签前无效） - 写法示例：
div.card:nth-of-type(-n+3)—— 选中前三个带card类的<div>，不管中间有没有<h3>或<hr>
想排除禁用项或广告后再取前三个？CSS 本身做不到“先过滤再取前N”
CSS 选择器没有执行顺序，“管道式”逻辑（如先 :not([data-ad]) 再取前三个）只是视觉错觉。浏览器实际是分别匹配两个条件，取交集，而非流式筛选。
立即学习“前端免费学习笔记（深入）”；
-
article:not([data-ad="true"]):nth-of-type(-n+3)≠ “前三个非广告 article”，而是“所有非广告 article 中，按 type 序号 ≤3 的那些”——如果前三个<article>全是广告，这个选择器就一个都不匹配 - 真正可控的做法：用 JS 动态加 class，例如
articles.filter(el => !el.hasAttribute('data-ad')).slice(0, 3).forEach(el => el.classList.add('top-3'))，再写.top-3 { ... } - 或者把干扰项设为
display: none，再用:nth-child(-n+3)—— 这时它们仍占 DOM 位置，但若结构已知且稳定，可临时绕过问题
Flex/Grid 布局下 :nth-child(-n+3) 依然只看 DOM 顺序
哪怕你用 order: -1 把某个元素视觉上提到最前，或用 Grid 的 grid-area 把它扔到第一格，只要它在 HTML 中是第 5 个子元素，就不会被 :nth-child(-n+3) 选中。
- 它完全不感知 CSS 布局层的变化，只依赖原始 DOM 插入顺序
-
visibility: hidden不影响匹配；display: none会影响——但注意：它只是让该元素不参与渲染，DOM 位置仍在，序号照算 - 长列表（上千子节点）动态渲染时，频繁触发重排可能卡顿，尤其在旧版 Safari 或低端 Android WebView 中
最易被忽略的一点：你以为在选“前三个卡片”，其实 CSS 正在数“前三个子节点”。结构越复杂，越早切到 JS 控制索引——这不是退步，是绕过选择器语义局限的务实做法。
