:last-of-type 选中同标签名的最后一个子元素，而非父容器末尾元素；它按源码顺序匹配，不受视觉布局（如 flex-reverse）或兄弟元素类型影响，但受 DOM 结构和同名标签实际位置制约。
last-of-type 选不到末尾元素？先确认它只看标签类型
:last-of-type 不是“容器里最后一个子元素”，而是“同标签名中排最后的那个”。比如 <div>
<p>A</p>
<span>B</span><p>C</p>
</div>，两个 <p></p> 中只有第二个会被 p:last-of-type 选中——因为它是所有 <p></p> 里的最后一个；但如果你在中间插了个 <em></em>，它照样不影响两个 <p></p> 的排序。
常见错误现象：div:last-of-type 在父容器里没生效，结果发现父容器下只有一个 <div>，但它前面还有 <code><h2></h2> 和 <ul></ul>——这完全不影响，:last-of-type 只数 <div> 自己的兄弟。真正失效的原因往往是：目标元素不是其标签类型的最后一个，或者被注释、文本节点干扰（但现代浏览器通常忽略纯文本节点）。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h3>和 last-child 的关键区别在哪？</h3>
<p><code>:last-child 看的是 DOM 树中的位置顺序：必须是父元素的最后一个直接子节点，且类型不限；:last-of-type 看的是标签名分组后的顺序：只要同名标签里排最后，哪怕前面有十个其他标签，也能命中。
- 用
:last-child：想处理“收尾那个不管是什么标签”的场景，比如清空最后一个列表项的下边框：li:last-child { border-bottom: none; } - 用
:last-of-type：想精准控制某类标签的末尾样式，比如只让最后一个<p></p>加个底色，不管它后面还有没有<blockquote></blockquote>或<hr> - 性能上没明显差异，但语义更清晰——选错伪类会导致样式飘忽，尤其在动态插入内容后
遇到 flex / grid 容器时，last-of-type 还管用吗？
管用，但要注意：flex 或 grid 布局不改变 DOM 结构，只是重排显示顺序。:last-of-type 依然按源码顺序匹配，不会按视觉位置重算。
也就是说，如果你用 flex-direction: row-reverse，视觉上最左边的元素其实是 DOM 里最后一个，但 :last-of-type 仍作用于源码中该标签类型的末尾项——它不会跟着“镜像”过去。
使用场景举例：
article > p:last-of-type {
margin-bottom: 2rem;
}
这段代码在 flex 容器里照常工作，前提是 <p></p> 确实是 article 下最后一个 <p></p> 标签。但如果用 order 属性把某个 <p></p> 推到最后显示，它在源码里不是最后一个，:last-of-type 就不会选中它。
兼容性与替代方案：IE8 不支持，但你可能根本不需要它
:last-of-type 在 IE9+、Edge、Chrome、Firefox、Safari 全系支持。IE8 及更早版本不支持，但如果你还在适配 IE8，大概率已用 JS 补丁或 class 手动标记末尾项了。
容易被忽略的地方：
- 它不区分是否在同一个层级——嵌套子容器里的同名标签不会参与父容器的
:last-of-type计算 - HTML5 自定义元素（如
<my-card></my-card>）也适用，只要浏览器识别该标签名 - 如果用 Web Components 或框架（React/Vue）动态生成结构，确保 SSR 或 hydration 后 DOM 状态与预期一致，否则首屏可能漏样式
真要兜底又不想加 class，可以用 :nth-last-of-type(1)，效果完全等价，但可读性更差，没必要换。
