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

问题描述

我无法区分 element:first-child 和 element:first-of-type

比如说，你有一个 div

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

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

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

谁能解释一下?

解决方案

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

在这些孩子中，只有一个可以成为第一个.这与 :first-child:

匹配

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

现在，反之亦然:任何 :first-child 必然也是 :first-of-type.由于这里的第一个孩子也是第一个div，所以会匹配both伪类，以及类型选择器div:

<div>孩子</div><div>孩子</div><div>孩子</div></div>

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

<div>孩子</div><!-- div:nth-child(2), div:first-of-type --><div>孩子</div><div>孩子</div></div>

注意 :first-child 等价于 :nth-child(1).

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

<div>孩子</div><!-- .parent >:first-of-type --><div>孩子</div><div>孩子</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() 匹配的元素的潜在数量.这在 有什么区别中有详细介绍在 p:nth-child(2) 和 p:nth-of-type(2) 之间?

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

For example say, you had a div

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

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

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

Could someone please explain?

解决方案

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:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</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.

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>

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>

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

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>

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.

: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)?

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