css :first-of-type与:last-of-type区别解析

:first-of-type 选中父元素中同类型标签的第一个，:last-of-type 选中最后一个；两者按元素类型匹配，常用于去除首段边距或隐藏末项边框等场景。

:first-of-type 和 :last-of-type 是 CSS 中的两个结构伪类选择器，用于选中父元素中特定类型的第一个或最后一个子元素。虽然它们语法相似，但作用位置相反，下面详细解析两者的区别与使用场景。

1. :first-of-type 详解

该选择器匹配父元素中同类型标签的第一个元素。也就是说，它会查找指定类型的元素在父容器中首次出现的那个。

有如下 HTML 结构：

<div>
  <p>第一段</p>
  <h2>标题</h2>
  <p>第二段</p>
  <h2>另一个标题</h2>
</div>

使用 p:first-of-type 会选中第一个 <p> 元素（“第一段”），因为它是所有 <p> 标签中的第一个。

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

稿定AI社区

在线AI创意灵感社区

60

查看详情

2. :last-of-type 详解

与前者相反，:last-of-type 匹配父元素中同类型标签的最后一个元素。

使用 p:last-of-type 会选中第二个 <p> 元素（“第二段”），因为它是所有 <p> 标签中的最后一个。

3. 关键区别总结

• :first-of-type —— 选中某一类型元素的首次出现
• :last-of-type —— 选中某一类型元素的最后一次出现
• 两者都基于元素类型**（如 p、h2、div）进行匹配，不区分类名或属性
• 如果某类型只有一个元素，:first-of-type 和 :last-of-type 会同时匹配该元素

4. 实际应用场景

这类选择器常用于样式微调，比如：

• 去除文章段落中第一个 <p> 的上边距：p:first-of-type { margin-top: 0; }
• 为最后一个列表项添加特殊样式：li:last-of-type { border-bottom: none; }
• 在混合标签结构中精准定位目标，避免额外类名

基本上就这些。理解它们的核心在于“按类型找首个或末个”，而不是在整个父元素中找第一个或最后一个子元素。用好这两个选择器，能让 CSS 更简洁高效。不复杂但容易忽略细节。

以上就是css :first-of-type与:last-of-type区别解析的详细内容，更多请关注php中文网其它相关文章！