17370845950

: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 并不要求该元素是父元素的最后一个子节点，只要它是某一类型中的最后一个即可。

基本语法和用法

使用方式如下：

举例说明：

这段代码会让父容器内最后一个 p 元素的文字变为红色，即使后面还有其他类型的标签（如 div 或 span）也不会影响选择结果。

实际应用场景

这个选择器常用于以下几种情况：

• 移除列表中最后一个项目的下边距或分隔线，避免多余的视觉分割
• 在文章段落中突出显示最后一段
• 为动态生成的内容（如评论列表）统一处理末尾样式

例如，想让多个段落之间有间距，但最后一个段落后不需要留空：

注意事项与兼容性

使用 :last-of-type 时需要注意几点：

• 只作用于同类型的标签，比如不会把 span 和 p 当作同一类
• 必须是同级元素，嵌套在不同父容器中的元素不会被比较
• 现代浏览器普遍支持，包括 IE9 及以上版本

如果结构复杂或需要更精确控制，可结合类名或 :nth-last-of-type() 使用。

基本上就这些。合理使用 :last-of-type 能让你的样式更灵活，减少对额外类名的依赖，提升代码简洁度。