:nth-last-child(-n+3)能选中父元素倒数第1、2、3个子元素，前提是目标元素类型匹配（如li:nth-last-child(-n+3)要求倒数前三名恰好是li）；它按DOM物理位置倒序计数，不感知display:none或类型过滤，结构混杂时需配合:nth-last-of-type或JS实现可靠选择。
用 :nth-last-child() 选最后三个子元素
直接写 :nth-last-child(-n+3) 就能命中父元素倒数第 1、2、3 个子元素，前提是它们类型匹配（比如你写 li:nth-last-child(-n+3)，那只有倒数前三名恰好是 li 才生效）。
这个表达式本质是“从末尾开始数，取前 n 个”，-n+3 展开就是：当 n=0 → 位置 3；n=1 → 位置 2；n=2 → 位置 1。所以它覆盖倒数第 1 到第 3 位。
- 必须配合标签名或类名使用，单独写
:nth-last-child(-n+3)没有意义 - 如果父容器末尾混着
div、p、span，而你只写div:nth-last-child(-n+3)，那可能一个都选不到——因为倒数前三名里未必有三个div - 想不管类型、只按视觉顺序选最后三个
.item？CSS 做不到，得用 JS
为什么不用 :last-child 连写三次
:last-child 只能选最后一个，:last-child:nth-last-child(2) 这种写法无效——伪类不能叠加判断位置。有人试图用 :last-child, :nth-last-child(2), :nth-last-child(3) 并列写，但这样写容易漏：如果倒数第三个不是目标类型，它就彻底缺席，样式断层。
- 并列选择器只做“或”匹配，不保证连续性
- 更危险的是，一旦 DOM 动态增删，比如中间插入一个
hr，原来倒数第二的元素可能变成倒数第三，样式就错位 -
:nth-last-child(-n+3)是原子操作，浏览器内部一次性计算位置，稳定性高得多
想选“可见的最后三个”怎么办
CSS 不感知 display: none 或 visibility: hidden，:nth-last-child() 算的全是 DOM 节点，包括被隐藏的。例如：
<div> <div class="item">1</div> <div class="item" style="display:none">2</div> <div class="item">3</div> <div class="item">4</div> </div>
这里 .item:nth-last-child(-n+3) 会选中 2、3、4 —— 因为它们在 DOM 里确实是倒数前三，尽管 2 被隐藏了。
- 真正要按渲染结果选最后三个可见
.item，只能用 JS 遍历getComputedStyle(el).display !== 'none' - 若结构固定、隐藏靠类名控制（如
.item.hidden），可改用.item:not(.hidden):nth-last-of-type(-n+3)，但注意：:nth-last-of-type仍只看同类型元素，不跨类型统计 - 没有万能 CSS 解法，这是 CSS 结构化特性的硬限制
兼容性与 fallback 注意点
:nth-last-child() 在 IE9+、所有现代浏览器都支持，但表达式 -n+3 在旧版 Safari（≤6）和 Android Browser ≤4.3 中有解析 bug，可能完全不生效。
- 稳妥做法：对关键场景降级为 JS，或用
:nth-last-child(1), :nth-last-child(2), :nth-last-child(3)拆开写（兼容性更好，但维护成本略升） - 如果父容器结构不可控（比如 CMS 输出内容，末尾常插广告
div或script），优先考虑用直接子选择器>锁定层级，例如.list > li:nth-last-child(-n+3) - 最易被忽略的是文本节点干扰：HTML 中换行缩进产生的空格文本节点，会让
:nth-last-child计算偏移——检查 DOM 时打开开发者工具的“显示文本节点”选项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
