:first-of-type 选中父元素中同类型标签的第一个，:last-of-type 选中最后一个；两者按元素类型匹配，常用于去除首段边距或隐藏末项边框等场景。
:first-of-type 和 :last-of-type 是 CSS 中的两个结构伪类选择器，用于选中父元素中特定类型的第一个或最后一个子元素。虽然它们语法相似，但作用位置相反，下面详细解析两者的区别与使用场景。
1. :first-of-type 详解
该选择器匹配父元素中同类型标签的第一个元素。也就是说，它会查找指定类型的元素在父容器中首次出现的那个。
例如：
有如下 HTML 结构：
第一段
标题
第二段
另一个标题
使用 p:first-of-type 会选中第一个
元素（“第一段”），因为它是所有
标签中的第一个。
立即学习“前端免费学习笔记（深入）”；
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情
2. :last-of-type 详解
与前者相反，:last-of-type 匹配父元素中同类型标签的最后一个元素。
继续上面的例子：
使用 p:last-of-type 会选中第二个
元素（“第二段”），因为它是所有
标签中的最后一个。
3. 关键区别总结
:first-of-type —— 选中某一类型元素的首次出现 :last-of-type —— 选中某一类型元素的最后一次出现 两者都基于元素类型**（如 p、h2、div）进行匹配，不区分类名或属性 如果某类型只有一个元素，:first-of-type 和 :last-of-type 会同时匹配该元素
4. 实际应用场景
这类选择器常用于样式微调，比如：
去除文章段落中第一个
的上边距：p:first-of-type { margin-top: 0; } 为最后一个列表项添加特殊样式：li:last-of-type { border-bottom: none; } 在混合标签结构中精准定位目标，避免额外类名
基本上就这些。理解它们的核心在于“按类型找首个或末个”，而不是在整个父元素中找第一个或最后一个子元素。用好这两个选择器，能让 CSS 更简洁高效。不复杂但容易忽略细节。
以上就是css :first-of-type与:last-of-type区别解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1044976.html
微信扫一扫 
支付宝扫一扫 
