:nth-last-child(n) 按同级所有子元素倒序计数，无视标签类型；而 :nth-last-of-type(n) 仅对同类型标签倒序计数，更精准匹配目标元素。
nth-last-child(n) 怎么写才生效
它只对同级兄弟元素倒序计数，且必须是「同类型」或「无类型限制」才能匹配到目标。比如 <div> 里混着 <p> 和 <span>，nth-last-child(2) 会从所有子元素里倒数第 2 个算，不管标签名；但 nth-last-of-type(2) 才按标签分组倒数。
常见错误是以为 nth-last-child(1) 能选中最后一个 <li>，结果发现没生效——很可能因为最后一个子元素其实是 </div> 后面的文本节点、注释，或者一个 <button>，根本不是 <li>。
- 要精准控制某类元素，优先用
nth-last-of-type(n) -
n可以是正整数、表达式（如2n+1）、甚至0n+3这种等价写法 - 负数不合法，
nth-last-child(-1)会直接失效 - 注意浏览器兼容性：IE9+ 支持
nth-last-child，但 IE8 及更早版本完全不认
倒数第 3 个元素总选不对？检查 DOM 结构是否“干净”
真实页面里，看似连续的列表常被空格、换行、注释干扰。HTML 中的空白符在解析时可能生成 Text 节点，导致实际子元素顺序和肉眼所见不一致。
例如这段代码：
立即学习 “ 前端免费学习笔记（深入）”；
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>看起来有 3 个 <li>，但若写成：
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>中间的换行和缩进可能让浏览器插入多个 Text 节点，此时 <li>C</li> 实际可能是第 5 个子节点，nth-last-child(1) 就选不到它。
- 用浏览器开发者工具的「Elements」面板右键「Edit as HTML」看真实结构
- 用
:nth-last-of-type(1)替代:nth-last-child(1)更鲁棒 - 构建时尽量避免手写换行干扰，或用构建工具压缩 HTML
nth-last-child 和 nth-last-of-type 的关键区别
nth-last-child 数的是「位置」，nth-last-of-type 数的是「同类标签的倒序序号」。这是最常混淆的点。
假设父容器内有：<div>、<p>、<div>、<p>、<div> 共 5 个子元素：
-
div:nth-last-child(1)→ 匹配最后一个子元素，即第 5 个<div>（如果它是第 5 个） -
div:nth-last-of-type(1)→ 匹配所有<div>中倒数第 1 个，即第 3 个<div>，不管它在整体中排第几 - 如果最后一个子元素是
<p>，那div:nth-last-child(1)根本不会匹配任何元素
多数业务场景下，你要的其实是后者——比如「让列表最后一项加粗」，应写 li:nth-last-of-type(1) {font-weight: bold;}，而不是依赖它恰好是最后一个子元素。
性能与维护隐患：别在复杂选择器里嵌套 nth-last
浏览器计算 nth-last-child 需遍历所有兄弟节点，嵌套层级越深、兄弟越多，样式重排开销越大。尤其在动态增删节点的列表（如 React/Vue 渲染的列表）中，频繁触发会导致卡顿。
- 避免写类似
.list > li:nth-last-child(2) > span:first-child这种深度嵌套 - 能用 class 控制就不用伪类：给倒数第 N 项手动加
class="last-third"更稳定、可读、易调试 - 动画或过渡中慎用：某些浏览器对
nth-last类选择器的重绘优化较差，可能导致闪烁
真正需要动态响应数量变化时，CSS 伪类才不可替代；其他时候，多花 10 秒加个 class，比调半小时选择器更省事。
