:last-of-type 选择父元素中同类型标签的最后一个子元素，如 p:last-of-type 选中最后一个 p 元素，不受后续其他类型元素影响，常用于去除最后项边框、调整间距等场景。
:last-of-type 是 CSS 中的一个伪类选择器，用于选择父元素中同类型中的最后一个子元素。它不是简单地选择最后一个子元素，而是根据元素的标签类型来判断。
基本语法
selector:last-of-type { 样式声明 }
这个选择器会匹配指定类型的元素中，在其父容器内是该类型最后一个出现的元素。
实际用法示例
假设你有如下 HTML 结构：
段落 1
段落 2
文本 1
段落 3
文本 2
如果你想选中最后一个
元素（即“段落 3”），可以这样写：
立即学习“前端免费学习笔记（深入）”；
p:last-of-type {
color: red;
}
这里虽然
不是整个
的最后一个子元素，但它是所有
p类型中的最后一个，因此会被选中。
九歌
九歌–人工智能诗歌写作系统
322 查看详情
同样，
span:last-of-type会选择“文本 2”，因为它是
span类型的最后一个。
常见使用场景
去除列表中最后一个同类元素的边框或分割线 调整排版中最后一段的外边距 在混合类型内容中精准控制样式
例如，下面这段代码可以去掉同类型按钮中最后一个的右边距：
button:last-of-type {
margin-right: 0;
}注意事项
:last-of-type 是基于元素类型的，不是基于类名或位置。比如：
这两个都是
div类型，所以
div:last-of-type会选中第二个。
如果你希望按
class区分，CSS 没有直接的
:last-of-class，需要借助其他方式，比如给最后一个添加特定类名，或使用 JS 控制。
基本上就这些。掌握
:last-of-type能帮你更灵活地处理结构复杂的 DOM 样式问题。
以上就是如何通过css:last-of-type选择最后一个子元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1073140.html赞 (0)打赏微信扫一扫
支付宝扫一扫
