: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 的文章中，你可以单独为第一个段落或最后一个段落设置样式，即使它们不是所有子元素中的第一个或最后一个。

实际应用场景示例

以下是一些常见且实用的使用技巧：

立即学习“前端免费学习笔记（深入）”；

● 为文章首段添加缩进或加大字号

想让文章的第一个段落看起来更突出，可以这样写：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

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 混淆。