:first-child 和 :first-of-type 有什么区别？

Question

我分不清element:first-child和element:first-of-type之间的区别

比如说，你有一个 div

div:first-child
→ 所有 <div> 元素是其父元素的第一个子元素。

div:first-of-type
→ 所有 <div> 元素是其父元素的第一个 <div> 元素。

这看起来完全一样，但它们的工作方式不同。

谁能解释一下？

Answer 1

一个父元素可以有一个或多个子元素：

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

在这些孩子中，只有一个可以成为第一个。这是由:first-child匹配的：

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

:first-child 和:first-of-type 之间的区别在于:first-of-type 将匹配其元素类型的第一个元素，在 HTML 中由其标记名称表示，即使该元素不是第一个子元素父母的。到目前为止，我们正在查看的子元素都是 divs，但请耐心等待，我稍后会讲到。

现在，反过来也成立：任何:first-child 也必然是:first-of-type。由于这里的第一个孩子也是第一个div，它会匹配both伪类，以及类型选择器div：

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

现在，如果您将第一个孩子的类型从div 更改为其他内容，例如h1，它仍然是第一个孩子，但显然不再是第一个div；相反，它成为第一个（也是唯一一个）h1。如果有任何其他div 元素跟随在同一个父元素中的第一个子元素之后，那么这些div 元素中的第一个元素将匹配div:first-of-type。在给定的示例中，在第一个孩子更改为 h1 后，第二个孩子成为第一个 div：

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

注意:first-child 等同于:nth-child(1)。

这也意味着，虽然任何元素一次只能有一个匹配:first-child 的子元素，但它可以并且将有与:first-of-type 伪类匹配的子元素数量与其拥有的子元素类型一样多.在我们的示例中，选择器 .parent > :first-of-type（带有隐式 * 限定 :first-of-type 伪）将匹配 两个 元素，而不仅仅是一个：

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

:last-child 和:last-of-type 也是如此：任何:last-child 必然也是:last-of-type，因为在其父元素中绝对没有其他元素跟随它。然而，因为最后一个 div 也是最后一个孩子，所以 h1 不能是最后一个孩子，尽管它是其类型中的最后一个。

:nth-child() 和:nth-of-type() 与任意整数参数一起使用时，在原理上非常相似（如上面提到的:nth-child(1) 示例），但它们的不同之处在于:nth-of-type() 匹配的潜在元素数量.这在What is the difference between p:nth-child(2) and p:nth-of-type(2)?中有详细介绍

Answer 2

我在这里创建了一个示例来演示first-child 和first-of-type 之间的区别。

    .parent :first-child {
      color: red;
    }

    .parent :first-of-type {
      background: yellow;
    }

    .parent p:first-child {
      text-decoration: line-through;
    }

    // Does not work
    .parent div:first-child {
      font-size: 20px;
    }
    // Use this instead
    .parent div:first-of-type {
      text-decoration: underline;
    }
    // This is second child regardless of its type
    .parent div:nth-child(2) {
      border: 1px black solid;
    }

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

Answer 3

first-child-type 和 first-child-type 之间的区别可以通过示例来理解。您需要了解我创建的以下示例，它确实有效，您可以将代码粘贴到您的编辑器中，您将了解它们的含义是以及它们是如何工作的

第一个类型的代码 #1：

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

结果

.p1,.p2,.p3 将被设置样式并且它们的颜色将为红色。即使我们将 .p1 放在后面 第二个 div 是红色的。

第一个孩子的代码 #2：

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

结果：

如果我们将 .p2 放在第二个 div 2 之后，它不会是红色的，但是在第一个 如果它工作正常。

Answer 4

:first-child 伪类选择一个元素，该元素是一组兄弟元素中的第一个元素如果它是其父元素的第一个子元素。另一方面，:first-of-type 在一组兄弟元素中选择指定类型的第一个元素无论它是否是其父元素的第一个子元素。