本文解析 `:last-of-type` 的实际匹配逻辑——它按 html 元素类型（如 `div`、`nav`）而非 css 类名筛选，因此在嵌套 `div` 结构中无法精准选中 `.sub` 类的最后一个直接子元素；而换用语义化标签（如 `nav`）可规避该限制，并提供纯 css 替代方案。
:last-of-type 是一个基于元素类型（tag name）的伪类，而非基于类名或任意选择器。它的作用是：在同级兄弟元素中，选出最后出现的指定标签类型（例如 div），再进一步检查该元素是否匹配前置选择器（如 .sub）。这意味着 .sub:last-of-type 实际等价于：
“在当前父容器的直接子元素中，找出所有 <div> 标签，取其中最后一个 <div>，再判断它是否同时拥有 class="sub"”。
为什么 <div class="super"> 中失效，而 <nav class="super"> 中“看似有效”？
看以下简化结构：
<!-- 使用 div -->
<div class="super">
<div class="sub">1</div>
<div class="sub">2</div>
<div class="super"> <!-- 这个 div 是同级中最后一个 div -->
<div class="sub">_1</div>
<div class="sub">_2</div>
</div>
</div>此时，.super > .sub:last-of-type 尝试匹配：
✅ 找到所有 .super 的直接子 <div> → 共 3 个：<div class="sub">1</div>、<div class="sub">2</div>、<div class="super">...</div>
❌ 其中最后一个 <div> 是 <div class="super">，它没有 class="sub" → 匹配失败 → 无样式生效
再看 <nav> 版本：
<!-- 使用 nav -->
<nav class="super">
<div class="sub">1</div>
<div class="sub">2</div>
<nav class="super"> <!-- 注意：这是 <nav>，不是 <div> -->
<div class="sub">_1</div>
<div class="sub">_2</div>
</nav>
</nav>此时，.super > .sub:last-of-type 的作用范围是：
✅ .super 的直接子元素中所有 <div> → 只有前两个：<div class="sub">1</div> 和 <div class="sub">2</div>（因为 <nav> 不是 <div>）
✅ 最后一个 <div> 就是 <div class="sub">2</div> → ✅ 同时满足 .sub → 样式生效
⚠️ 注意：这种“生效”只是巧合——因为 .super 的子元素中 <div> 恰好集中在顶部，且最后一个 <div> 带 .sub。一旦结构变化（如末尾插入 <div class="other">），它仍会失效。
如何用 <div> 实现真正可靠的“最后一个 .sub 直接子元素”？
CSS 本身不支持 :last-of-class，但现代浏览器（Chrome 105+、Firefox 119+、Safari 16.4+）已支持 :has() 选择器，可构建等效逻辑：
/* 选中：后面紧邻一个 .super 元素的 .sub，或作为最后一个子元素的 .sub */
.super > .sub:has(+ .super),
.super > .sub:last-child {
background-color: turquoise;
}✅ 原理说明：
- .super > .sub:has(+ .super) → 匹配后面紧跟一个 .super 元素的 .sub（即每个层级中倒数第二个 .sub，因之后必接 .super 容器）
- .super > .sub:last-child → 匹配整个子列表中最后一个 .sub（即最深层的末尾 .sub）
二者组合，即可覆盖所有“层级末尾的 .sub”——效果等同于期望的“每个 .super 下最后一个 .sub 直接子元素”。
? 示例验证（含三层嵌套）：
<div class="super"> <div class="sub">1</div> <!-- ✅ 匹配 :has(+ .super) --> <div class="sub">2</div> <!-- ✅ 匹配 :has(+ .super) --> <div class="super"> <div class="sub">_1</div> <!-- ✅ 匹配 :has(+ .super) --> <div class="sub">_2</div> <!-- ✅ 匹配 :has(+ .super) --> <div class="super"> <div class="sub">__1</div> <div class="sub">__2</div> <!-- ✅ 匹配 :last-child --> </div> </div> </div>
替代建议与最佳实践
- ✅ 优先使用语义化标签：如用 <section class="super"> 或自定义元素 <app-section> 替代无意义的 <div class="super">，既提升可访问性，也天然规避 :last-of-type 的类型干扰。
- ✅ 降级兼容方案：若需支持旧浏览器，推荐 JavaScript 动态添加类（如 class="sub-last"），或预处理模板时标记末位元素。
- ⚠️ 避免误用 :nth-of-type(n) 或 :last-of-type 试图匹配类名——它们永远只认标签名。
总结：:last-of-type 不是“最后一个带某类的元素”，而是“最后一个某标签类型的元素”。理解这一点，是写出健壮 CSS 选择器的关键前提。
