: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:first-of-type 会选中“这是第一个段落”这个元素。

2. :last-of-type 的作用

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

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 继续以上面的例子：

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

示例代码：

第一段

一个 div

最后一段

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

3. 关键区别总结

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

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

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

# css  # 区别  # 第一个  # 这是  # 选择器  # 就会  # 首个  # 中不  # 两种类型  # 多个  # 它是  # 相关文章  # 查询优化器推荐网站下载  # 集团网站建设的好处  # 百度关键词seo排名软件推荐  # 龙岩推广网站找哪家  # 线上营销推广方案  # 查重网站建设工作内容  # 镇江如何建设网站  # 政和提供seo推广  # 营口高端网站建设电话  # 南京网站建设的主要特点