:last-of-type选中同标签名兄弟元素中最后一个，非父容器末尾元素；兼容IE9+，IE8需JS降级；遇混合标签或DOM干扰时需改用JS、结构约束或Flex/Grid方案。
用 :last-of-type 选中同类型中的最后一个子元素
它不是选“整个父容器里最后一个子元素”，而是选“和自己标签名相同的、在兄弟中排最后的那个”。比如父元素里有 <p></p>、<div>、<code><p></p>、<span></span>、<p></p>，那么第三个 <p></p> 就是 p:last-of-type —— 因为它是所有 <p></p> 中最后一个。
常见错误是以为它等价于 :last-child，结果样式没生效。比如把 li:last-of-type 写在带 <ul></ul> 的列表里，但末尾加了个 <div class="footer">，那最后一个 <code><li> 就不是 :last-of-type 了（因为 <li> 后面还有别的标签），得换成 li:last-child 或者改结构。
:last-of-type 和 :nth-of-type(2n) 这类伪类的兼容性底线
IE9+ 支持 :last-of-type，但 IE8 及更早版本完全不认。如果项目还要兼容 IE8，就得用 JS 补充 class，或者改用结构上可控的方案（比如给最后一个目标元素手动加 class="last"）。
-
:nth-of-type()系列在 Safari 5.1+、Chrome 4+、Firefox 3.5+ 都没问题，但旧 Android WebView（4.3 之前）有部分解析 bug - 不要在 CSS-in-JS 库里直接写
:last-of-type并期望它自动加 vendor prefix —— 它不需要前缀，加了反而可能出错 - SSR 渲染时，服务端生成的 HTML 如果和客户端 hydration 后的 DOM 类型顺序不一致（比如 JS 动态插入了新元素），可能导致样式闪动
当需要“最后一种类型”但标签名不统一时怎么办
比如一组卡片，有的是 <article></article>，有的是 <section></section>，但你想让“最后一张卡片”（不管什么标签）有特殊边框 —— :last-of-type 失效，因为它只认标签名。
立即学习“前端免费学习笔记（深入）”；
这时候只能换思路：
- 用 JS 找到父容器下所有符合条件的子元素（比如
document.querySelectorAll('.card')），然后给最后一个加 class - 用 CSS
:last-child+ 结构约束：确保卡片类元素连续排列、后面不跟其他类型元素 - 改用 Flex/Grid 布局配合
margin控制间距，比如.card:not(:last-child) { margin-bottom: 1rem; }，避开“选中最后一个”的需求
为什么 div:last-of-type 有时选不到任何元素
最常踩的坑是父容器里只有一个 <div>，但它前面有注释节点、文本节点（比如换行空格）、或 <code><!-- comment --> —— 这些在 DOM 树里都算“兄弟节点”，会干扰 :last-of-type 的判断逻辑。
例如：
<section> <!-- intro --> <div class="item">A</div> <div class="item">B</div> </section>
这段代码里，第一个 <div> 前面有注释节点，所以两个 <code><div> 在兄弟节点序列中其实不是连续紧挨着的 —— 但 <code>:last-of-type 仍能正确选中第二个，因为注释不影响“类型统计”。真正的问题往往出在：你写的 div:last-of-type 想匹配某个特定 <div>，但它上面混着 <code><header></header>、<main></main>、<footer></footer>，而你忘了它们也都是 div 的“表兄弟”？不，它们不是 —— header、main 是独立语义标签，和 div 类型不同，不会干扰。
真正容易被忽略的是：自定义元素（如 <my-card></my-card>）和原生标签不属于同一类型，哪怕它内部渲染成 div，CSS 伪类也只看 HTML 标签名。
