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

想要精通CSS选择器？本文深入解析`:first-of-type`与`:last-of-type`的区别，助你精准定位网页元素！`:first-of-type`选择父元素下指定类型的第一个子元素，例如，`p:first-of-type`选中首个`

`标签；而`:last-of-type`则选择同类型中的最后一个子元素，如`p:last-of-type`选中末尾的`

`标签。关键在于，两者都只在同类型标签内部按顺序进行匹配，不受其他标签类型的影响。通过本文的详细讲解和示例代码，让你彻底掌握这两个实用伪类的用法，提升你的前端开发效率！

: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 标签，: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学习网公众号！