:first-of-type 选中父元素中同类型标签的第一个，:last-of-type 选中最后一个；两者按元素类型匹配，常用于去除首段边距或隐藏末项边框等场景。
:first-of-type 和 :last-of-type 是 CSS 中的两个结构伪类选择器，用于选中父元素中特定类型的第一个或最后一个子元素。虽然它们语法相似，但作用位置相反，下面详细解析两者的区别与使用场景。
1. :first-of-type 详解
该选择器匹配父元素中同类型标签的第一个元素。也就是说，它会查找指定类型的元素在父容器中首次出现的那个。
例如：有如下 HTML 结构：
使用 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 更简洁高效。不复杂但容易忽略细节。
