第一个孩子和第一个孩子之间有什么区别？

我分辨不出 element:first-child和 element:first-of-type的区别

例如，你有一个 div

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

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

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

有人能解释一下吗？

71718 次浏览
小开
最佳答案

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

<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 中，该元素由其标记名称 即使该元素不是父元素的第一个子元素表示。到目前为止，我们正在研究的子元素都是 div，但请耐心等待，我将在稍后进行讨论。

现在，反过来也成立: 任何 :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，它仍然是第一个孩子，但是显然它不再是第一个 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(1)示例) ，:nth-child()和 :nth-of-type()的功能在原则上非常相似，但它们的不同之处在于与 :nth-of-type()匹配的潜在元素数量。这在 P: nth-child (2)和 p: nth-of-type (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>

小开

第一个子类型和第一个子类型之间的区别可以通过例子来理解。你需要理解我创建的下面的例子，它真的可以工作你可以把代码粘贴到你的编辑器中，你会理解它们是什么，以及它们是如何工作的

第一类代码 # 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将被设置为样式，它们的颜色将是红色 第二个 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后面，那么第一个 div 2不会是红色的 如果有用的话。

小开

:first-child伪类选择一个元素，该元素是一组同级元素 如果它是父母的第一个孩子中的第一个元素。另一方面，:first-of-type在一组同级元素 不管它是否是父母的第一个孩子中选择指定类型的第一个元素。


提交答案