.sub:last-of-type常失效，因它先按标签名（如div）筛选父元素所有同标签子元素，再取其中最后一个，最后才检查该元素是否含.sub类；若最后一个同标签元素无此类，则匹配失败。
:last-of-type 不按类名、不按属性，只认 HTML 标签名。想用它选“最后一个 .sub 元素”，基本会失败——除非你恰好把所有 .sub 都塞进同一种父容器里，且该容器下没有其他同标签的兄弟元素。
为什么 .sub:last-of-type 经常不生效
因为浏览器执行逻辑是：先找父元素的所有 div 子元素（假设 .sub 是 div），再取其中最后一个，最后才看它有没有 class="sub"。只要最后一个 div 没有 .sub 类，整条规则就匹配不到任何东西。
常见失效结构：
<div class="super">
<div class="sub">1</div>
<div class="sub">2</div>
<div class="super"><!-- 这个 div 是 .super 的最后一个 div 子元素 -->
<div class="sub">_1</div>
</div>
</div>-
.super > .sub:last-of-type查的是.super的直接子元素中最后一个div，结果是中间那个class="super"的div - 它没
.sub类 → 匹配失败 - 哪怕你写成
div.sub:last-of-type，效果也一样
什么时候 :last-of-type 能用对
它真正适合的场景，是父容器内目标标签类型唯一、或至少末尾几个全是同一类标签。
立即学习“前端免费学习笔记（深入）”；
- 文章段落：
p:last-of-type安全，因为<p>前后通常夹着<h2>或<div>，不影响p类型内部排序 - 表格行：
tr:last-of-type在标准<tbody>中几乎总能命中最后一行，因为<tbody>下一般只有<tr> - 导航菜单项：
li:last-of-type可靠，前提是<ul>里没混入<div>或注释节点
关键判断点：打开开发者工具，展开父元素，肉眼数一遍它的所有 div（或你目标的标签）子节点，看最后一个是不是你要的那个。
想真正选“最后一个带某 class 的元素”，该用什么
CSS 本身没有 :last-of-class，但现代方案已成熟：
- 首选
:has()组合：.super > .sub:has(+ .super), .super > .sub:last-child—— 匹配后面紧跟.super的.sub，或自身就是父元素最后一个子元素的.sub - 兼容性注意：Chrome 105+、Firefox 121+、Safari 15.4+ 支持；旧版需回退到 JS 方案（如
document.querySelectorAll(".sub").at(-1)） - 别用
:last-child替代——它要求元素必须是父元素的最后一个子节点，容错更低
如果结构可控，更简单的方式是改用语义化标签：把容器换成 <section class="super">，内容仍用 <div class="sub">，那么 section.super > div.sub:last-of-type 就不会被其他 div 干扰。
真正容易被忽略的点：:last-of-type 的“类型”永远绑定在标签名上，和 class、id、data 属性完全无关；哪怕你给所有 div 加上 data-role="item"，它也不会因此改变匹配逻辑。
