В чем разница между первым ребенком и первым типом?

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 представлен его именем тега, даже если этот элемент не является первым дочерним элементом родительского элемента. Пока все дочерние элементы, на которые мы смотрим, были 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(), Это подробно описано в разделе В чем разница между p:nth-child(2) и 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

В :first-childпсевдокласс выбирает элемент, который является первым элементом среди группы элементов-братьев, если он является первым дочерним элементом своего родителя . С другой стороны, :first-of-typeвыбирает первый элемент указанного типа среди группы родственных элементов независимо от того, является ли он первым дочерним элементом своего родителя.

Answer 4

Разницу между типом first-child и first-child можно понять на примере. Вам нужно понять следующий пример, созданный мной, и он действительно работает, вы можете вставить коды в свой редактор, вы поймете, что это такое и как они работают

Код №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, он не будет красным, однако в первом случае он работал.