:first-child 和 :first-of-type 有啥区别？
Posted
技术标签:
【中文标题】:first-child 和 :first-of-type 有啥区别？【英文标题】：What is the difference between :first-child and :first-of-type?:first-child 和 :first-of-type 有什么区别？ 【发布时间】：2014-08-30 16:58:58 【问题描述】：我分不清element:first-child和element:first-of-type之间的区别
比如说，你有一个 div
div:first-child
→ 所有 <div> 元素是其父元素的第一个子元素。
div:first-of-type
→ 所有 <div> 元素是其父元素的第一个 <div> 元素。
这看起来完全一样，但它们的工作方式不同。
谁能解释一下？
【问题讨论】：
第一个孩子只针对父项的第一个孩子，其中第一个类型针对该类型的第一个孩子（div 或跨度或您尝试定位的任何内容） 第一个 'div' 孩子可能有一个年长的兄弟姐妹。 first-of-type 选择这样的 div，因为它是该类型的第一个子元素，first-child 不会选择该 div，因为它不是第一个子元素。 【参考方案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 中由其标记名称表示，即使该元素不是第一个子元素父母的。到目前为止，我们正在查看的子元素都是 divs，但请耐心等待，我稍后会讲到。
现在，反过来也成立：任何:first-child 也必然是:first-of-type。由于这里的第一个孩子也是第一个div，它会匹配both伪类，以及类型选择器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() 和:nth-of-type() 与任意整数参数一起使用时，在原理上非常相似（如上面提到的:nth-child(1) 示例），但它们的不同之处在于:nth-of-type() 匹配的潜在元素数量.这在What is the difference between p:nth-child(2) and p:nth-of-type(2)?中有详细介绍
【讨论】：
我终于明白了。如果我想要 div 元素下的第一个 div，我会调用 div:first-of-type，因为它上面可能有非 div 元素。这有点令人困惑，但我现在明白了。这是一篇出色且内容丰富的帖子。谢谢你，非常感谢你的帮助。 我根据这个答案创建了一个示例：codepen.io/bigtinabang/pen/pmMPxO【参考方案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> 【讨论】：
这应该是公认的答案。结合 Fiddle 可以快速理解并完成。 为什么没有文字装饰：下划线，还是边框？？？？ True - “改用这个”示例没有应用任何样式【参考方案3】：first-child-type 和 first-child-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>
结果
.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 之后，它不会是红色的，但是在第一个 如果它工作正常。
【讨论】：
冗余答案的质量低于社区 wiki 提供的答案。【参考方案4】：:first-child 伪类选择一个元素，该元素是一组兄弟元素中的第一个元素如果它是其父元素的第一个子元素。另一方面，:first-of-type 在一组兄弟元素中选择指定类型的第一个元素无论它是否是其父元素的第一个子元素。
【讨论】：
以上是关于:first-child 和 :first-of-type 有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章
markdown ：first-child和：first-of-type
css CSS：在/之后和：first-child /：last-child合并
伪类选择器:first-child和:nth-child()和:first-of-type