PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
:nth-last-child(3) 只匹配倒数第3个子元素，而非最后三项；正确选中最后三项需用 :nth-last-child(-n+3)，它匹配倒数第1–3个位置的元素，但要求这些位置上恰好是目标类型且结构连续；若父容器混有其他标签或节点，应改用 :nth-last-of-type(-n+3) 精准选取最后三个同类型元素。
为什么 :nth-last-child(3) 选不中最后三项？
直接写 :nth-last-child(3) 只会匹配倒数第 3 个元素，不是“最后三项”。这个伪类是单个元素定位器，不是范围选择器。它的逻辑是：从末尾往前数，第 n 个位置上恰好有该元素且满足父容器子元素结构约束（比如必须是同类型兄弟元素），才命中。
:nth-last-child(-n+3) 是正确写法
要选中最后三项，得用公式 -n+3：当 n=1 时，结果是 2；n=2 → 1；n=3 → 0 —— 但 CSS 中位置索引从 1 开始，所以实际生效的是 n=1、2、3 代入后得到的正整数位置：3、2、1。也就是倒数第 1、2、3 个元素。
实操注意点：
-
:nth-last-child(-n+3)匹配的是「在所有子元素中倒数位置 ≤3 的元素」，不要求它们连续或同类型；如果中间夹着其他标签（比如<span></span>），可能漏选 - 若列表项是
<li>，而父容器里还有<p></p>或注释节点，:nth-last-child仍按全部子节点计数，此时应改用:nth-last-of-type() - 兼容性没问题，IE9+ 都支持
什么时候该用 :nth-last-of-type()？
当父容器混有多种标签，又只想选最后几个特定标签时，:nth-last-child 会失效。比如：
- A
- B
- C
这里 <li> 共 3 个，但它们在子元素中的位置分别是 1、3、4，所以 :nth-last-child(-n+3) 会匹配第 2、3、4 个子元素（即 <div>、第二个 <code><li>、第三个 <li>），而不是全部三个 <li>。
此时换成：
-
li:nth-last-of-type(-n+3)—— 按<li>类型单独倒数，稳稳选中全部三个 - 注意：
:nth-last-of-type不认 class 或属性，只看 HTML 标签名
别忘了考虑空元素和 display: none
:nth-last-child 和 :nth-last-of-type 都只看 DOM 结构，不管样式。即使某个 <li style="display:none">，它依然参与计数。如果需要忽略隐藏项，CSS 无解，得靠 JS 过滤后加 class 控制。
另外，空文本节点（比如换行缩进）在 IE 中可能被算作子节点，导致位置偏移；现代浏览器基本忽略纯空白文本节点，但仍建议写 HTML 时避免无意义换行嵌套。
