:nth-last-of-type() 仅按同标签名子元素倒序定位，适用于结构干净、标签统一的场景，如菜单末项去边距、段落末尾去下边距、卡片倒数第二加阴影、表格汇总行加粗；它忽略文本节点、注释及属性，不支持按class或状态筛选，与:nth-last-child()核心区别在于计数范围不同。
它适合解决“按标签类型倒数定位”的问题，不适合解决“按视觉位置或混合类型倒数”的问题。
哪些场景能直接用 :nth-last-of-type() 稳住样式
核心前提是：目标元素是同一标签名、且为父容器的直接子元素。
- 菜单栏最后一项加右边界移除：
nav > a:nth-last-of-type(1) { margin-right: 0; } - 文章末尾最后一个
<p>取消下边距：p:nth-last-of-type(1) { margin-bottom: 0; } - 卡片列表中倒数第二张加特殊阴影：
.card:nth-last-of-type(2) { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } - 表格里最后一个
<tr>标记为汇总行（需配合<tbody>结构）：tbody > tr:nth-last-of-type(1) { font-weight: bold; }
这些场景共同点是：结构干净、标签统一、无需关心中间有没有换行或注释——:nth-last-of-type() 天然跳过它们。
为什么不能靠它选“带 class 的倒数第二个”
:nth-last-of-type() 完全不解析 class、id、data 属性，只认 HTML 标签名。写 .btn-primary:nth-last-of-type(2) 的实际含义是：“在所有同级 <button>（假设 btn-primary 是 button）中，取倒数第二个，再检查它是否含 btn-primary 类”。如果倒数第二个 <button> 没这个 class，整条规则就失效。
立即学习“前端免费学习笔记（深入）”；
- 想选“最后一个带
.active的<li>”？CSS 做不到，得用 JS 查 DOM 后加 class - 想让“倒数第二项若为禁用状态则隐藏”？伪类无法读取
disabled属性，:disabled和:nth-last-of-type()无法组合出这种逻辑 - 用
div:nth-last-of-type(1)却没生效？先检查 DevTools 里父元素下是不是真有<div>直接子节点——可能被<section>或<article>包了一层
和 :nth-last-child() 混用时最容易翻车的地方
两者语义完全不同，但名字太像，导致调试时反复怀疑写法。关键区别不在“正序/倒序”，而在“计数范围”：
-
:nth-last-child(2)：父容器所有子节点（包括#text、<!-- -->、<div>）倒数第 2 个，必须是目标标签才匹配 -
:nth-last-of-type(2)：只提取所有同类型子节点（如全部<li>），再倒数第 2 个，完全无视其他节点存在
所以当 HTML 是多行缩进格式（产生文本节点）、或动态插入广告 <div class="ad"> 时，:nth-last-child(2) 定位会偏移，而 :nth-last-of-type(2) 依然稳定——但前提是广告不是 <li>。
真正难的不是写选择器，而是看清 DOM
几乎所有失效案例，根源都在开发者工具里没展开父节点看真实子节点构成。比如以为 ul 下全是 li，结果发现框架注入了 <li class="separator"> 或服务端模板加了空格文本节点。这时候 :nth-last-of-type(2) 还在正常工作，只是你数错了“倒数第二”到底是谁。
别依赖肉眼判断嵌套层级；右键父元素 → “检查”，盯着 Elements 面板里展开后的第一层子节点看——那里才是 :nth-last-of-type() 真正在数的东西。
