:last-of-type比:last-child更可靠，因其只在同标签类型中倒序匹配最后一个元素，无视后续其他类型节点（如div、注释、文本），而:last-child要求目标必须是父元素的最后一个子节点，易受结构干扰。
:last-of-type 选中的是父元素下同标签名的最后一个子元素，不是页面里最后一个、也不是父元素的最后一个子节点——只看“类型”和“同类型中的位置”。
为什么 :last-of-type 比 :last-child 更可靠？
当 HTML 结构不规则（比如末尾混入其他标签）时，:last-child 往往失效，而 :last-of-type 仍能命中目标。
-
p:last-child要求<p></p>必须是父元素的最后一个直接子节点；如果后面还有<span></span>或<div>，就完全不匹配<li> <code>p:last-of-type只统计所有<p></p>，选其中 DOM 顺序最靠后的那个，不管它后面有没有别的标签 - 常见错误现象：
li:last-child在 CMS 输出末尾自动插入<!-- more -->注释或空<div> 后突然失效，换成 <code>li:last-of-type立刻恢复:last-of-type的典型使用场景它最适合处理“同类元素末尾需特殊样式”的通用需求，尤其是动态生成内容时无需额外 class。
- 移除列表最后一项的
border-bottom：用li:last-of-type { border-bottom: none; } - 收窄文章末段的
margin-bottom：用p:last-of-type { margin-bottom: 0; } - 给卡片容器中最后一个
<img alt="怎样在CSS3中使用:last-of-type选择同类型末尾元素" >添加圆角或阴影：.card img:last-of-type { border-radius: 4px; } - 避免在 Flex 容器中因换行导致
:last-child错位，改用:last-of-type更稳定
容易被忽略的限制与坑
这个选择器看着简单，但几个边界条件常导致预期外行为。
立即学习“前端免费学习笔记（深入）”；
- 只认标签名，不认 class 或属性 ——
div.red:last-of-type和div.blue:last-of-type是独立计算的，不会跨 class 比较 - 伪元素（如
::before）、注释节点、文本节点都不参与计数，但隐藏元素（display: none）仍被计入 - 不支持嵌套层级穿透 ——
article p:last-of-type只匹配<article></article>的直接子<p></p>，若<p></p>套在<section></section>里就不生效 - IE8 及更早版本完全不支持，现代项目基本可忽略，但若需兼容旧内网系统，得 fallback 到 class 控制
真正要用好
:last-of-type，关键是盯住「父元素」「同标签名」「DOM 顺序」这三个锚点 —— 少一个，结果就可能出人意料。 - 移除列表最后一项的
