:last-of-type 选择器用于选中父元素中特定标签类型的最后一个子元素，例如 p:last-of-type 会使最后一个段落文字变红；它与 :last-child 不同，后者要求元素必须是父级的最后一个子节点；常用于去除最后一个段落的边距或高亮最后一项错误信息；该伪类仅基于标签名匹配，不区分 class 或属性，且在 IE9+ 和现代浏览器中兼容性良好。
当你想为某类元素中的最后一个元素应用特定样式时，:last-of-type 是一个非常实用的 CSS 伪类。它会选中父元素中具有相同标签类型的最后一个子元素，而不受其他类型元素的干扰。
什么是 :last-of-type？
:last-of-type 选择器匹配属于其父元素的特定类型（即标签名）的最后一个子元素。比如，在一段包含多个 <p> 和 <div> 的内容中，它只会关心某一类标签的“最后出现”。
例如：
p:last-of-type { color: red; }这段样式会让父容器中最后一个 <p> 元素文字变红，即使后面还有 <div> 或其他标签也不会影响判断。
立即学习“前端免费学习笔记（深入）”；
实际应用场景
这个伪类在以下情况特别有用：
- 去除列表或段落组中最后一个元素的多余边距或分割线
- 高亮最后一项提示信息
- 在混合内容区域中精准控制某类标签的样式
常见用法示例：
.article p:last-of-type { margin-bottom: 0; /* 最后一个段落不加底部边距 */ }li.error:last-of-type {
font-weight: bold; / 最后一个错误项加粗显示 /
}
与 :last-child 的区别
:last-of-type 和 :last-child 不一样。后者要求该元素必须是父元素的最后一个子节点，且类型不限。
举个例子：
第一段
第二段
结尾说明在这个结构中：
- p:last-of-type 会选中“第二段”这个 <p>
- p:last-child 不会生效，因为最后一个子元素是 <span>，不是 <p>
注意事项
使用 :last-of-type 时要注意几点：
- 只看标签类型，不区分 class 或属性
- 如果最后一个对应标签不存在，自然不会匹配任何元素
- 在复杂嵌套结构中，需确认目标元素的父级关系
- 兼容性良好，IE9+ 及现代浏览器都支持
基本上就这些。合理使用 :last-of-type 能让你的样式更精准，避免添加额外的 class 来控制末尾元素的显示效果。
