用:nth-last-child(n)选择倒数第n个子元素，它从父元素最后一个子节点起按DOM顺序倒数，不区分标签类型；而:nth-last-of-type(n)只在同类型元素中倒数。
倒数第n个子元素怎么选？
直接用 :nth-last-child(n)，它从最后一个子元素开始往前数，不是从父容器末尾位置算——这点特别容易误解。比如 :nth-last-child(2) 选的是倒数第二个子元素，但前提是这个元素**恰好是其父元素的第 n 个倒数子节点**，且类型不限（不区分标签名）。
常见错误：以为它能跨类型倒数，或者和 :nth-child() 对称使用却忽略 DOM 结构实际顺序。举个例子：
ul > li:nth-last-child(2) { color: red; }只有当 li 是 ul 的倒数第二个子元素时才生效；如果中间夹了个 <p> 或注释节点，那 li 就可能根本匹配不上。
为什么 :nth-last-child(2) 有时不生效？
根本原因在于它只看「子元素位置」，不看「元素类型」或「可见性」。以下情况会导致失效：
立即学习“前端免费学习笔记（深入）”；
-
:nth-last-child()只作用于**同级子元素中的指定位置**，不会跳过其他标签或文本节点 - 父元素末尾有非目标标签（如
<div>、<span>），会挤占倒数序号 - 用了
display: none的元素仍参与计数，但伪元素（::before/::after）不参与 - 动态插入/删除节点后，序号实时重算，但 CSS 不会重新触发 JS 逻辑，容易造成状态错位
:nth-last-child() 和 :nth-last-of-type() 有什么区别？
这是最常混淆的一对：
-
:nth-last-child(n)：按 DOM 子节点顺序倒数，不管标签名 ——<li>、<div>、<span>全算进去 -
:nth-last-of-type(n)：只倒数**同类型元素**，比如li:nth-last-of-type(2)表示所有<li>中倒数第二个
示例对比：
<ul> <li>A</li> <div>B</div> <li>C</li> <li>D</li> </ul>
其中：
- li:nth-last-child(2) → 不匹配（倒数第二个子元素是 <li>D</li>，但它在 DOM 中是第4个子元素，倒数第1个）
- li:nth-last-of-type(2) → 匹配 <li>C</li>（两个 li 倒数第2个）
实用技巧：配合 An+B 语法做范围选择
:nth-last-child() 支持完整 An+B 语法，不只是数字。想选「最后3个」或「从倒数第5个开始的所有偶数位」，就得靠它：
-
:nth-last-child(-n+3)→ 倒数第1、2、3个子元素（常用作“收尾高亮”） -
:nth-last-child(2n)→ 倒数第2、4、6…个子元素（注意：是从末尾起算的偶数位，不是整个列表的偶数位） -
:nth-last-child(n+2)→ 从倒数第2个开始往左全部匹配（即排除最后一个）
性能上无明显差异，但过度嵌套或搭配复杂选择器（如 div ul li:nth-last-child(odd)）可能触发重排，尤其在长列表中。真要操作大量动态项，优先考虑加 class 控制，而不是纯靠 :nth-last-child()。
真正难的不是写法，而是每次修改 HTML 结构后，得重新确认子节点序列是否还符合你的倒数预期——DOM 一变，样式就断，这种隐式依赖最容易被忽略。
