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

124

我不能告诉之间的区别element:first-child和element:first-of-type

例如说，您有一个div

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

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

这似乎完全一样，但是它们的工作方式不同。

有人可以解释一下吗？

css css-selectors

— BoltClock
source

第一个孩子仅针对父对象的第一个孩子，其中第一个类型的孩子针对该类型的第一个孩子（div或span或您要定位的对象）

— Huangism

第一个“ div”孩子可能有一个较大的兄弟姐妹。first-of-type选择此类div，因为它是该类型的第一个子元素，first-child将不会选择该div，因为它不是第一个子元素。

— n8bar

207

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

<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中由其标记名表示，即使该元素不是parent的第一个子元素也是如此。到目前为止，我们正在查看的子元素都是divs，但是请耐心等待，我将稍作介绍。

就目前而言，反过来也成立：任何事情: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。在给定的示例中，在第div一个孩子更改为之后，第二个孩子成为第一个孩子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伪数）将匹配两个元素，而不仅仅是一个：

<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()。这在详细覆盖的第n个孩子（2）和P：第n-的式（2）什么是P之间的区别？

— BoltClock
source

4

我终于明白了如果我想要div元素下的第一个div，我会叫div：first-of-type，因为它上面可能有非div元素。这有点令人困惑，但我现在明白了。这是一篇非常出色且非常有用的文章。感谢您的帮助，我们将不胜感激。

1

我根据此答案创建了一个示例：codepen.io/bigtinabang/pen/pmMPxO

— Tina Chen

14

我已经创建了一个例子来说明之间的区别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/

— 文
source

0

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

第一类代码＃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之后，它不会变成红色，但是在第一种情况下它会起作用。

— 清除所有内容
source