:first-of-type选中同类型子元素中的第一个，:last-of-type选中最后一个，二者按标签类型匹配，不受类名或ID影响。例如p:first-of-type将样式应用于首个段落，p:last-of-type作用于末尾段落，常用于文章段落、列表项或表单字段的首尾元素样式控制，如去除li:first-of-type上边距、加粗p:last-of-type文字，提升CSS简洁性与可维护性。
在CSS中，:first-of-type 和 :last-of-type 是非常实用的伪类选择器，用于选中某一类型元素中的第一个或最后一个。它们能帮助你在不添加额外类名的情况下，精准控制特定元素的样式。
理解 :first-of-type 与 :last-of-type 的作用
这两个伪类基于元素的标签类型（如 p、div、li 等）进行匹配：
:first-of-type 选中父元素下同类型子元素中的第一个 :last-of-type 选中父元素下同类型子元素中的最后一个
注意：它们只关心元素的“类型”和它在同类型兄弟中的位置，不依赖于类名或ID。
实际使用示例
假设你有以下HTML结构：
立即学习“前端免费学习笔记（深入）”；
标题
第一段文字
第二段文字
第三段文字
你想为第一个和最后一个段落设置特殊样式：
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 p:first-of-type {
color: blue;
}
p:last-of-type {
font-weight: bold;
}
这样，“第一段文字”会变成蓝色，“第三段文字”加粗显示。注意 h2 不影响 p 的计数，因为它们是不同类型。
常见应用场景
这些伪类特别适合用于内容流中动态生成的结构：
文章段落首尾强调 列表中首个/末个项目去边距或加图标 表单字段中第一个输入框自动聚焦样式
例如，在无序列表中去除首项上边距、末项下边距：
li:first-of-type {
margin-top: 0;
}
li:last-of-type {
margin-bottom: 0;
}
基本上就这些。掌握 :first-of-type 和 :last-of-type 能让你更灵活地处理结构化内容，减少对类名的依赖，让CSS更简洁高效。
以上就是如何在CSS中实现:first-of-type与:last-of-type选择特定元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/963889.html
微信扫一扫 
支付宝扫一扫 
