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

1. :first-of-type 详解

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

有如下 HTML 结构：

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

使用 p:first-of-type 会选中第一个

元素（“第一段”），因为它是所有

标签中的第一个。

2. :last-of-type 详解

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

使用 p:last-of-type 会选中第二个

元素（“第二段”），因为它是所有

标签中的最后一个。

3. 关键区别总结

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

4. 实际应用场景

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

• 去除文章段落中第一个

  的上边距：p:first-of-type { margin-top: 0; }

• 为最后一个列表项添加特殊样式：li:last-of-type { border-bottom: none; }
• 在混合标签结构中精准定位目标，避免额外类名

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

本篇关于《css :first-of-type与:last-of-type区别解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！