:first-child 与 :first-of-type：我什么时候应该使用每个 CSS 伪类？

使用 :first-child 与 :first-of-type 进行元素选择

在 CSS 中，伪类 :first-child和 :first-of-type 都根据元素在父元素中的位置来选择元素。但是，它们在定义“first”的方式上有所不同。

Element:first-child

:first-child 选择其指定父元素的第一个子元素，无论其元素类型。在提供的示例中：

div:first-child

此选择器将匹配所有

作为其父元素的第一个子元素的元素。如果父元素包含任何其他元素类型，则不会选择它们。

Element:first-of-type

:first-of-type 选择第一个其父级中特定元素类型的实例。它将匹配第一个

。元素，即使它不是整体的第一个子元素。例如：

div:first-of-type

在提供的 HTML 中：

<div class="parent">
  <div>Child</div>
  <h1>

:first-of-type 将选择

;将类“parent”作为

的第一个实例元素，而

id 为“first”的将是

的第一个实例。元素。

主要区别

• 元素层次结构: :first-child 根据子顺序匹配，而 :first-of-类型根据元素类型和该类型中的位置进行匹配。
• 数量匹配: :first-child 只能匹配每个父元素的一个元素，而 :first-of-type 可以匹配相同类型的多个元素。
• 特异性: :first- of-type 通常比 :first-child 具有更高的特异性，这意味着它将在 CSS 中优先

用法示例

使用 :first-child 选择：

• 第一个无序列表中的列表项：ul li:first-child
• 列表中第一篇博客文章的标题：文章 .blog-post:first-child h2

使用 :first-of-输入以选择：

• 第一个标题 (

  ,

  等）在文档中： body :first-of-type

• 表单中的第一个按钮：form button:first-of-type

以上是:first-child 与 :first-of-type：我什么时候应该使用每个 CSS 伪类？的详细内容。更多信息请关注PHP中文网其他相关文章！