:last-of-type 选择器用于选中父元素中同类型标签的最后一个元素，如 p:last-of-type 会选中最后一个 p 元素并设置样式，常用于去除末尾间距或突出最后一段，支持现代浏览器且无需额外类名，提升代码简洁性。
在CSS中，:last-of-type 是一个非常实用的伪类选择器，它能帮助我们选中父元素中某一类型标签的最后一个实例，并为其单独设置样式。这个选择器特别适用于动态内容或不确定元素数量的结构中。
什么是 :last-of-type？
:last-of-type 会匹配其父元素中具有相同标签名的最后一个子元素。例如，如果有多个 p 标签，它会选择其中最后一个 p；如果有多个 div，则选择最后一个 div，前提是它们属于同级元素。
与 :last-child 不同的是，:last-of-type 并不要求该元素是父元素的最后一个子节点，只要它是某一类型中的最后一个即可。
基本语法和用法
使用方式如下：
立即学习“前端免费学习笔记（深入）”；
element:last-of-type {property: value;
}
举例说明：
color: red;
}
这段代码会让父容器内最后一个 p 元素的文字变为红色，即使后面还有其他类型的标签（如 div 或 span）也不会影响选择结果。
实际应用场景
这个选择器常用于以下几种情况：
- 移除列表中最后一个项目的下边距或分隔线，避免多余的视觉分割
- 在文章段落中突出显示最后一段
- 为动态生成的内容（如评论列表）统一处理末尾样式
例如，想让多个段落之间有间距，但最后一个段落后不需要留空：
p {margin-bottom: 16px;
}
p:last-of-type {
margin-bottom: 0;
}
注意事项与兼容性
使用 :last-of-type 时需要注意几点：
- 只作用于同类型的标签，比如不会把 span 和 p 当作同一类
- 必须是同级元素，嵌套在不同父容器中的元素不会被比较
- 现代浏览器普遍支持，包括 IE9 及以上版本
如果结构复杂或需要更精确控制，可结合类名或 :nth-last-of-type() 使用。
基本上就这些。合理使用 :last-of-type 能让你的样式更灵活，减少对额外类名的依赖，提升代码简洁度。
