:first-of-type选中父元素下同类型的首个元素，如p:first-of-type匹配第一个p标签；:last-of-type选中最后一个同类型元素，常用于控制首项缩进、去除末项边框等场景。
在CSS中，:first-of-type 和 :last-of-type 是两个非常实用的伪类选择器，它们可以帮助你选中某一类型元素的第一个或最后一个。这类选择器特别适合在不添加额外类名的情况下对特定元素进行样式控制。
什么是 :first-of-type？
该伪类选择器会匹配其父元素下同类型的**第一个元素**。比如页面中有多个
p
标签，使用
p:first-of-type
就能选中第一个
p
元素。
示例：
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情 
p:first-of-type {
color: red;
}
上面的样式会让第一个段落文字变成红色，不管前面有没有其他标签（如 h1、div），只要它是第一个
p
，就会被选中。
立即学习“前端免费学习笔记（深入）”；
什么是 :last-of-type？
与前者相反，:last-of-type 会选中父元素中同一类型的**最后一个元素**。
示例：
p:last-of-type {
font-weight: bold;
}
这个规则会让最后一个
p
标签加粗显示。
实际应用场景
这两个选择器常用于以下情况：
给文章段落中的第一段增加缩进或上边距 移除列表中最后一个项目的下边框，避免多余线条 高亮某个容器内的首项或末项
例如，清除列表最后一项的边框：
.item {
border-bottom: 1px solid #ccc;
}
.item:last-of-type {
border-bottom: none;
}
注意事项
理解“type”的含义很关键 —— 它指的是元素的标签类型。比如
h2:first-of-type
只会找第一个
h2
，不会受其他标题影响。
同时要注意，这些选择器只考虑元素类型和它在父级中的位置，不关心是否有类名或ID。如果结构复杂，建议结合开发者工具验证是否选中了预期元素。
基本上就这些。合理使用 :first-of-type 和 :last-of-type 能让你的CSS更简洁，减少不必要的类名依赖。
以上就是如何用css:first-of-type和:last-of-type选择元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1073955.html
微信扫一扫 
支付宝扫一扫 
