:last-of-type是最标准写法，精准匹配父元素中最后一个指定标签类型的直接子元素；它只看同类标签的末位，不苛求整体末尾位置，且与:nth-last-of-type(1)等价，IE9+全支持。
:last-of-type 是最直接、最标准的写法，它能精准命中父元素中最后一个指定标签类型的子元素，比如 p:last-of-type 就只选最后一个 p，不管后面还有没有 div 或文本节点。
为什么不用 :last-child？
:last-child 看的是“位置”——必须是父元素的**最后一个子节点**才匹配。一旦后面跟了个 span、注释、甚至空格文本节点，div:last-child 就立刻失效。
- 常见错误：写
.card:last-child想高亮最后一个卡片，结果因为末尾有个<footer></footer>，整条规则不生效 -
:last-child对嵌套结构也敏感：子容器里最后一个.card也会被意外选中 - 它完全不关心标签类型，
div:last-child和p:last-child逻辑一致，只是碰巧目标是 div 或 p
:nth-last-of-type(1) 和 :last-of-type 有区别吗？
没有实质区别，:nth-last-of-type(1) 就是 :last-of-type 的显式写法，语义更清晰，但浏览器解析行为完全等价。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 两者都只统计同标签名的兄弟元素（如所有
p），从末尾倒数取第一个 - 都只作用于**直接子元素层级**，不跨层；
section > p:last-of-type比p:last-of-type更安全 - IE9+ 全支持，现代项目可放心用，不必降级
- 别指望它认 class：
.item:last-of-type实际含义是 “最后一个div（假设 .item 是 div）且带 .item 类”，如果最后一个div没这个 class，就完全不匹配
想选“带某个 class 的最后一个直接子元素”，怎么办？
原生 CSS 没有 .item:last-of-type 这种语法——伪类不支持 class + 类型双重过滤。你真正需要的是“在所有 .item 中取最后一个”，这得靠现代选择器或 JS 补位。
立即学习“前端免费学习笔记（深入）”；
- 现代解法（Chrome 105+、Firefox 109+）：
.container > .item:nth-last-child(1 of .item) - 兼容 fallback：
.container > .item:last-child配合结构约束（确保 .item 总是连续排在末尾） - 稳妥兜底：JS 查询
document.querySelectorAll('.container > .item')，给最后一项加临时 class，再用 CSS 定义样式 - 别写
.item:nth-last-of-type(1)试图蒙混过关——它和你的需求语义无关，纯属误导
真正容易被忽略的是 DOM 层级关系。遇到样式没生效，先确认目标元素是不是父容器的**直接子元素**，再看它前面有没有其他同类型元素干扰计数——比反复改选择器更快的办法，是打开开发者工具，右键“Reveal in Elements panel”，一眼看清父子链。
