first-of-type与last-of-type区别详解

:first-of-type 和 :last-of-type 是 CSS 中精准控制样式的关键结构伪类——它们不按元素在父容器中的绝对位置，而是聚焦于“同类型标签内的首个或最后一个实例”，无论中间穿插多少其他元素，都能智能识别并应用样式，让开发者轻松实现如首段加粗、末项高亮等细腻设计效果。

:first-of-type 和 :last-of-type 是 CSS 中的结构伪类，用于选择父元素中特定类型的第一个或最后一个子元素。它们的区别在于匹配的位置方向不同。

1. :first-of-type 的作用

该伪类选择父元素中同类型标签的第一个元素。

• 如果有多个 p 标签，:first-of-type 会选中其中最先出现的那个。
• 即使前面有其他类型的标签（如 h2、div），只要它是第一个 p，就会被选中。

示例代码：

使用 p:first-of-type 会选中“这是第一个段落”这个元素。

2. :last-of-type 的作用

与前者相反，它选择父元素中同类型标签的最后一个元素。

• 尽管中间夹杂了 span 或其他标签，只要某个 p 是所有 p 中最后一个，就会被 :last-of-type 选中。
• 这个选择器不关心后面是否还有别的标签类型，只关注该类型自身的出现顺序。

示例代码：

p:last-of-type 会选中“最后一段”，即使后面没有其他 p，它也是唯一且最后一个。

3. 关键区别总结

• :first-of-type 匹配某一类型子元素中的首个实例。
• :last-of-type 匹配某一类型子元素中的末个实例。
• 两者都基于元素类型（如 p、div、li）进行筛选，而不是整体位置。
• 忽略其他标签类型的影响，只在同类标签内比较位置。

基本上就这些。理解它们的关键是记住“同类型”和“在父容器中的顺序”。

到这里，我们也就讲完了《first-of-type与last-of-type区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！