PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
:nth-child(-n+3)能选中前三个元素，因为它匹配父元素中位置索引≤3的子节点（n=0,1,2时得3,2,1），只取正整数结果；它按所有子节点（含文本、注释等）统一编号，而:nth-of-type(-n+3)仅对同标签兄弟编号，二者本质不同。
为什么 :nth-child(-n+3) 能选中前三个元素？
它不是字面意思的“负 n 加 3”，而是数学表达式 -n + 3 的遍历结果：当 n = 0, 1, 2, 3... 代入时，得到位置值为 3, 2, 1, 0, -1...；CSS 只取正整数结果，所以实际匹配第 1、2、3 个子元素。
关键点在于：:nth-child() 检查的是元素在其父容器中的**真实 DOM 顺序位置**，且只接受正整数索引。负数或零会被忽略。
:nth-child(-n+3) 和 :nth-of-type(-n+3) 的区别在哪？
前者按所有子元素统一编号（div、p、span 都算），后者只对同类型标签计数。
- 如果父元素里混有
<div>、<code><span></span>、<p></p>，:nth-child(-n+3)会选中前三个子节点（不管标签名） - 而
:nth-of-type(-n+3)可能选不到三个<div> —— 比如前三个子元素全是 <code><span></span>，那第一个<div> 就是第 4 个同类型元素，不会被匹配 <li>常见误用场景：想给前三个 <code><li>加样式，但列表里插了<div class="divider">，这时该用 <code>:nth-of-type()才稳定容易踩的坑：伪类不生效的几个典型原因
写对了公式，但样式没出来？大概率卡在这几处：
- 父容器没有设置
display: block或默认流式布局（比如父元素是display: flex但子项用了order属性——:nth-child仍按 HTML 顺序计算，不受order影响） - 目标元素不是直接子元素（
:nth-child不支持后代选择器嵌套，.parent > :nth-child(-n+3)合法，但.parent :nth-child(-n+3)会匹配所有符合条件的后代，可能超出预期） - HTML 中存在注释、文本节点（如换行空格）——它们也是子节点！
<ul>\n <li>A</li>\n <li>B</li>\n</ul>里，换行符生成的文本节点会占据位置，导致第一个<li>实际是第 2 个子节点 - 浏览器兼容性没问题（IE9+ 都支持），但旧版 Safari 对复杂公式解析偶有偏差，建议加个兜底：
li:first-child, li:nth-child(2), li:nth-child(3)
替代方案：什么时候不该用
-n+3？当结构动态、需要精确控制「可见的前三个」而非「DOM 前三个」时，CSS 无能为力——比如用 JavaScript 切换
display: none或visibility: hidden后，:nth-child依然按原始顺序计数。此时更可靠的做法：
- 服务端/JS 渲染时直接加 class（如
class="top-3"） - 用 JS 动态添加 class：
document.querySelectorAll('li').forEach((el, i) => i - CSS 新特性可试
:has()（仅 Chromium 111+ 支持）：ul:has(li:nth-child(3)) > li:nth-child(-n+3)，但兼容性太窄，慎用
真正要小心的是空格和注释带来的隐式子节点，这比公式本身更容易让人抓瞎。
- 父容器没有设置
