:nth-child(-n+5)选前5个子元素，因-n+5≥1等价于n≤5，故匹配位置1至5的子节点；它按dom真实结构计数，含文本节点和杂标签，不区分可见性或标签类型。
直接用 :nth-child(-n+5) 就能选中前 5 个子元素，但前提是这些元素必须是同级、连续、且从第一个开始计数的子节点——它不认“第几个可见项”或“第几个特定标签”，只看 DOM 结构里的真实位置。
为什么 :nth-child(-n+5) 能选前 5 个？
这个公式本质是线性函数：对每个子元素的位置 n（从 1 开始），代入 -n + 5，结果 ≥ 1 时就匹配。所以：
-
n = 1→-1 + 5 = 4 ≥ 1✅ -
n = 5→-5 + 5 = 0 ❌？等等，不对——实际计算逻辑是「找出所有满足 <code>n ≤ 5的整数n」，因为-n+5 ≥ 1等价于n ≤ 4？错，再算：移项得n ≤ 5。所以n = 1,2,3,4,5全部满足。 - 关键点：
-n+5是递减序列，从 4 开始往下走，但它匹配的是让表达式结果为正整数的那些n，不是计算值本身。
:nth-child(-n+5) 和 :nth-of-type(-n+5) 完全不同
如果你的列表里混着其他标签（比如 <p></p>、<span></span>），:nth-child() 会把它们全算进去；而 :nth-of-type() 只统计同类型标签：
ul > li:nth-child(-n+5) { background: #eee; } /* 前 5 个子节点中是 li 的才生效，但如果第 3 个子是 <div>，那第 6 个 li 也可能被误选中 */<p>更安全的做法是确认结构干净，或者改用：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>确保父容器下只有目标标签（如纯 <code><li></code>）</li>
<li>需要跳过非目标元素时，优先考虑 <code>:nth-of-type(-n+5)</code>
</li>
<li>现代场景可配合 <code>:is(li):nth-child(-n+5)</code>（但注意兼容性）</li>
</ul>
<h3>常见翻车现场：伪元素、注释、空格文本节点也算子元素</h3>
<p>HTML 中换行和缩进会产生 <code>Text</code> 节点，它们也是子节点。例如：</p>
<pre class="brush:php;toolbar:false;">
- 1
- 2
这段代码实际有 5 个子节点：换行符（text）、<li>、换行符、<li>、换行符。所以 :nth-child(-n+5) 会命中第一个换行符（无效）、第一个 <li>、第二个换行符（无效）、第二个 <li>、第三个换行符——看起来像只选了两个 <li>，其实逻辑没错，只是你没意识到文本节点占位了。
- 解决办法：压缩 HTML（移除换行/空格），或用
display: none隐藏无关 text 节点（不推荐） - 更可靠的方式：给列表加 class，用 Flex/Grid 控制渲染，再用
:nth-child()辅助样式 - 调试技巧：在 DevTools 里右键父元素 → “Edit as HTML”，删掉换行再看效果
真正要注意的不是公式怎么写，而是你写的那个 5，到底对应 DOM 树里的第几个物理位置——浏览器可不管你想选“前五个列表项”，它只数“前五个子节点”。
