:first-of-type 和 :last-of-type 伪类选择器用于选中父元素中同类型子元素的第一个或最后一个；例如 article p:first-of-type 可增大首段字号，.container div:last-of-type 可移除末尾边距，section img:first-of-type 和 :last-of-type 可实现图文混排对齐；需注意二者基于标签类型而非整体位置，单个元素时两者均匹配，且兼容性良好，适用于现代浏览器。
在CSS中，:first-of-type 和 :last-of-type 是非常实用的伪类选择器，它们可以帮助我们精准地选中某一类型元素中的第一个或最后一个，而无需添加额外的类名。掌握这些选择器，能让你的样式更简洁、更具语义化。
理解 :first-of-type 与 :last-of-type 的作用
这两个伪类选择器基于元素的“类型”（即标签名）进行匹配：
:first-of-type 选中父元素中同类型的子元素里的第一个。 :last-of-type 选中父元素中同类型的子元素里的最后一个。
例如，在一段包含多个 p 和 h2 的文章中，你可以单独为第一个段落或最后一个段落设置样式，即使它们不是所有子元素中的第一个或最后一个。
实际应用场景示例
以下是一些常见且实用的使用技巧：
立即学习“前端免费学习笔记（深入）”；
● 为文章首段添加缩进或加大字号
想让文章的第一个段落看起来更突出，可以这样写：
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情
article p:first-of-type { font-size: 1.2em; margin-top: 0;}
● 移除列表中特定类型元素的边距
当混合使用不同标签时，比如在一个容器中有多个 div 和一个 aside，你可以只给最后一个 div 去掉底部边距：
.container div:last-of-type { margin-bottom: 0;}
● 高亮第一项和最后一项的特殊内容
在图文混排布局中，让第一个图片左对齐、最后一个右对齐：
section img:first-of-type { float: left; margin-right: 1rem;}section img:last-of-type { float: right; margin-left: 1rem;}
注意事项与兼容性
使用这两个伪类时需注意以下几点：
它们是基于“元素类型”而非“整体位置”，所以 p:first-of-type 不一定等于 p:nth-child(1)。 如果某个类型的元素只有一个，那么 :first-of-type 和 :last-of-type 会同时命中它。 现代浏览器普遍支持这两个伪类，包括IE9及以上版本，适用于大多数生产环境。
基本上就这些。合理使用 :first-of-type 和 :last-of-type，能减少HTML中的冗余类名，提升代码可维护性。关键是理解它们按“类型”筛选的逻辑，避免与 :first-child 或 :last-child 混淆。
以上就是如何在CSS中使用:first-of-type和:last-of-type选择器_伪类应用技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/974198.html
微信扫一扫 
支付宝扫一扫 
