有什么区别：first-child和：first-of-type？ [英] What is the difference between :first-child and :first-of-type?

问题描述

我不能区分元素：first-child 和元素：first-of-type

例如，您有一个div

For example say, you had a div

div：first-child

→所有< div> 是其父级的第一个子级元素。

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

div：第一类型

→全部< div> 元素，它们是其父代的第一个< div> 元素。

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

推荐答案

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

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>

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

Among these children, only one of them can be the first. This is matched by :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中由其标签名称​​表示，即使该元素不是父的第一个子元素。到目前为止，我们正在查看的子元素都是 div ，但是忍受我，我会得到一点。

The difference between :first-child and :first-of-type is that :first-of-type will 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.

现在，转换也成立：any ：first-child 也是：first-of-type 。因为这里的第一个孩子也是第一个 div ，它将匹配两个伪类，以及类型选择器 div ：

For now, the converse also holds true: any :first-child is also :first-of-type by necessity. Since the first child here is also the first div, it will match both pseudo-classes, as well as the type selector 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 match div：first-of-type 。在给定的示例中，第一个子变为 h1 之后，第二个子变成第一个 div p>



Now, if you change the type of the first child from div to something else, like h1, it will still be the first child, but it will no longer be the first div obviously; instead, it becomes the first (and only) h1. If there are any other div elements following this first child within the same parent, the first of those div elements will then match div:first-of-type. In the given example, the second child becomes the first div after the first child is changed to an 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>

请注意，：first-child ：nth-​​child（1）。

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

This also implies that while any element may only have a single child element matching :first-child at a time, it can and will have as many children matching the :first-of-type pseudo-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-type pseudo) will match two elements, not just one:

<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 ：any ：last-child ：last-of-type ，因为绝对没有其他元素在其父元素之后。但是，由于最后一个 div 也是最后一个子对象，所以 h1 不能是最后一个子对象，的类型。

The same holds true for :last-child and :last-of-type: any :last-child is by necessity also :last-of-type, since absolutely no other element follows it within its parent. Yet, because the last div is also the last child, the h1 cannot be the last child, despite being the last of its type.

这篇关于有什么区别：first-child和：first-of-type？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！