: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 的文章中，你可以单独为第一个段落或最后一个段落设置样式，即使它们不是所有子元素中的第一个或最后一个。
实际应用场景示例
以下是一些常见且实用的使用技巧：
立即学习“前端免费学习笔记（深入）”；
● 为文章首段添加缩进或加大字号想让文章的第一个段落看起来更突出，可以这样写：
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 混淆。
