如何在CSS中使用:first-of-type和:last-of-type选择器_伪类应用技巧

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

以上就是如何在CSS中使用:first-of-type和:last-of-type选择器_伪类应用技巧的详细内容，更多请关注php中文网其它相关文章！