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中，它的标记名称为，即使element不是父的第一个子元素。到目前为止，我们所看到的子元素都是div s，但是请耐心等待，我会稍微谈谈它。

目前，反过来也是如此：任何: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>

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

h1

请注意，<div class="parent"> <h1>Child</h1>  <div>Child</div>  <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>  <div>Child</div>  <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)匹配的元素。 What is the difference between p:nth-child(2) and p:nth-of-type(2)?

详细介绍了这一点

Answer 2

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

HTML

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

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

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

Answer 3

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

第一种类型的代码＃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之后，它将不会是红色，但是在第一个如果它正在工作。

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

3 个答案: