应根据需求选择伪类：需选物理位置最后两个子元素用 :nth-last-child(-n+2)，需选某类元素中最后两个则用 :nth-last-of-type(-n+2)，因前者受所有子节点影响，后者只按同类型元素倒序计数。
直接用 :nth-last-child(-n+2) 就行，但得确认它真在你想要的位置生效
这个写法会匹配父容器中倒数第 1 和倒数第 2 个子元素（位置上），不管它们是什么标签。它不是“最后两个 li”，而是“最后两个子节点”。如果父容器里只有目标元素（比如纯 ul 里全是 li），那 li:nth-last-child(-n+2) 能稳稳选中最后两项；一旦混入 div、注释或换行产生的文本节点，序号就偏了——可能一个都选不中。
:nth-last-child(-n+2) 失效的常见原因
你以为 HTML 写得干净，但浏览器看到的是真实 DOM 结构：
- HTML 中的换行和缩进会生成 Text 节点，它们被计入子节点总数
- 注释节点
<!-- something -->也是子节点，会占位 - 非目标标签（如
<hr>、<script></script>）同样参与倒序编号 -
:nth-last-child()只认「元素节点」，但对类型不做筛选——所以li:nth-last-child(-n+2)要求倒数第 1、2 个子节点**恰好是li**，否则不匹配
什么时候该换成 :nth-last-of-type(-n+2)
如果你的目标明确是「最后两个同类型元素」（比如最后两个 li、最后两个 tr、最后两个 button），那就必须切过去：
-
li:nth-last-of-type(-n+2)会先收集所有li，再从这些li中倒数取前两个，中间夹着多少其他标签都不影响 - 兼容性完全一致（IE9+），无需降级
- 它不关心父容器里有多少个
div或注释，只按同类型元素倒序编号 - 注意：如果总共只有 1 个
li，这条规则自动不生效，不会报错也不会误匹配
调试时最省时间的操作
别猜，直接看真实子节点结构：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Elements 面板 → 右键父容器 → “Reveal in Elements panel” → 展开看子节点列表
- 数一数倒数第 1、2 个是不是你要的元素类型
- 临时加一句
*:nth-last-child(-n+2) { outline: 2px solid red; }快速验证命中范围 - 如果发现命中的是
div或文本节点，说明结构干扰已存在，立刻换:nth-last-of-type()
真正难的不是写对公式，而是判断你到底要“物理位置上的倒数两个”，还是“某类元素中的最后两个”——前者靠 :nth-last-child()，后者只能靠 :nth-last-of-type()。很多人调了十几分钟才发现自己一直在用错伪类。
