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

What is the difference between :first-child and :first-of-type?

提问by BoltClock

I can't tell the difference between element:first-childand element:first-of-type

我不能告诉之间的区别element:first-child和element:first-of-type

For example say, you had a div

例如说，你有一个 div

div:first-child
→ All <div>elements that are the first child of their parent.

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

div:first-of-type
→ All <div>elements that are the first <div>element of their parent.

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

This seems like the exact same thing, but they work differently.

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

Could someone please explain?

有人可以解释一下吗？

回答by BoltClock

A parent element can have one or more child elements:

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

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

Among these children, only one of them can be the first. This is matched by :first-child:

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

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

The difference between :first-childand :first-of-typeis that :first-of-typewill match the first element of its element type, which in HTML is represented by its tag name, even if that element is not the first child of the parent. So far the child elements we're looking at have all been divs, but bear with me, I'll get to that in a bit.

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

For now, the converse also holds true: any :first-childis also :first-of-typeby necessity. Since the first child here is also the first div, it will match bothpseudo-classes, as well as the type selector div:

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

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

Now, if you change the type of the first child from divto something else, like h1, it will still be the first child, but it will no longer be the first divobviously; instead, it becomes the first (and only) h1. If there are any other divelements following this first child within the same parent, the first of those divelements will then match div:first-of-type. In the given example, the second child becomes the first divafter the first child is changed to an h1:

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

<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>

Note that :first-childis equivalent to :nth-child(1).

请注意，:first-child相当于:nth-child(1).

This also implies that while any element may only have a single child element matching :first-childat a time, it can and will have as many children matching the :first-of-typepseudo-class as the number of types of children it has. In our example, the selector .parent > :first-of-type(with an implicit *qualifying the :first-of-typepseudo) will match twoelements, not just one:

这也意味着，虽然任何元素一次只能有一个子元素匹配: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>

The same holds true for :last-childand :last-of-type: any :last-childis by necessity also :last-of-type, since absolutely no other element follows it within its parent. Yet, because the last divis also the last child, the h1cannot be the last child, despite being the last of its type.

这同样适用于:last-childand :last-of-type：any:last-child也是必然的:last-of-type，因为在它的父元素中绝对没有其他元素跟随它。然而，因为 lastdiv也是最后一个孩子，h1所以不可能是最后一个孩子，尽管它是同类中的最后一个。

:nth-child()and :nth-of-type()function very similarly in principle when used with an arbitrary integer argument (as in the :nth-child(1)example mentioned above), but where they differ is in the potential number of elements matched by :nth-of-type(). This is covered in detail in What is the difference between p:nth-child(2) and p:nth-of-type(2)?

:nth-child()和:nth-of-type()与任意整数参数一起使用时，原理上非常相似（如:nth-child(1)上面提到的示例中），但它们的不同之处在于与 匹配的元素的潜在数量:nth-of-type()。这在详细覆盖的第n个孩子（2）和P：第n-的式（2）什么是P之间的区别？

回答by Wen

I have created an example to demonstrate the difference between first-childand first-of-typehere.

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

HTML

HTML

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

CSS

CSS

.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;
}

To see the complete example, please visit https://jsfiddle.net/bwLvyf3k/1/

要查看完整示例，请访问https://jsfiddle.net/bwLvyf3k/1/

回答by Clear everything

The difference between the first-child-type and first-child can be understand with the example.you need to understand the follwing example created by me and it really work you can paste the codes in your editor you will understand what they are and how they work

第一个孩子类型和第一个孩子之间的区别可以通过示例来理解。您需要了解我创建的以下示例，它确实有效您可以将代码粘贴到编辑器中，您将了解它们是什么以及如何他们工作

Code #1 for first-of-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>

result

结果

.p1,.p2,.p3 will be styled and thier color will be red.even if we put .p1 after the second div it will be red.

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

Code #2 for first-child:

第一个孩子的代码#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>

result:

结果：

if we put the .p2 after the second div 2 it will not be red however in the first case it was working.

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