css伪类:last-of-type与样式应用

:last-of-type 选择器用于选中父元素中特定标签类型的最后一个子元素，例如 p:last-of-type 会使最后一个段落文字变红；它与 :last-child 不同，后者要求元素必须是父级的最后一个子节点；常用于去除最后一个段落的边距或高亮最后一项错误信息；该伪类仅基于标签名匹配，不区分 class 或属性，且在 IE9+ 和现代浏览器中兼容性良好。

当你想为某类元素中的最后一个元素应用特定样式时，:last-of-type 是一个非常实用的 CSS 伪类。它会选中父元素中具有相同标签类型的最后一个子元素，而不受其他类型元素的干扰。

什么是 :last-of-type？

:last-of-type 选择器匹配属于其父元素的特定类型（即标签名）的最后一个子元素。比如，在一段包含多个 <p> 和 <div> 的内容中，它只会关心某一类标签的“最后出现”。

例如：

这段样式会让父容器中最后一个 <p> 元素文字变红，即使后面还有 <div> 或其他标签也不会影响判断。

立即学习“前端免费学习笔记（深入）”；

实际应用场景

这个伪类在以下情况特别有用：

• 去除列表或段落组中最后一个元素的多余边距或分割线
• 高亮最后一项提示信息
• 在混合内容区域中精准控制某类标签的样式

常见用法示例：

与 :last-child 的区别

:last-of-type 和 :last-child 不一样。后者要求该元素必须是父元素的最后一个子节点，且类型不限。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

举个例子：

在这个结构中：

• p:last-of-type 会选中“第二段”这个 <p>
• p:last-child 不会生效，因为最后一个子元素是 <span>，不是 <p>

注意事项

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

• 只看标签类型，不区分 class 或属性
• 如果最后一个对应标签不存在，自然不会匹配任何元素
• 在复杂嵌套结构中，需确认目标元素的父级关系
• 兼容性良好，IE9+ 及现代浏览器都支持

基本上就这些。合理使用 :last-of-type 能让你的样式更精准，避免添加额外的 class 来控制末尾元素的显示效果。

以上就是css伪类:last-of-type与样式应用的详细内容，更多请关注php中文网其它相关文章！