:first-of-type 选择父元素中某类型第一个子元素，如 p:first-of-type 选中首个 p；:last-of-type 则选中该类型最后一个子元素，如 p:last-of-type 选中末个 p；两者均仅在同类型标签内按顺序匹配，忽略其他标签类型影响。

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

1. :first-of-type 的作用

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

例如，在一段内容中选择第一个段落 p：

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

示例代码：

<p>这是第一个段落</p>
<span>一些文字</span>
<p>这是第二个段落</p>

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

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

2. :last-of-type 的作用

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

稿定AI社区

在线AI创意灵感社区

60

查看详情

继续以上面的例子：

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

示例代码：

<p>第一段</p>
<div>一个 div</div>
<p>最后一段</p>

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

3. 关键区别总结

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

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

以上就是