Was ist der Unterschied zwischen: erstem Kind und: erstem Typ?

Ich kann den Unterschied zwischen element:first-childund nicht erkennenelement:first-of-type

Sagen Sie zum Beispiel, Sie hatten eine Div

div:first-child
→ Alle <div>Elemente, die das erste Kind ihres Elternteils sind.

div:first-of-type
→ Alle <div>Elemente, die das erste <div>Element ihres übergeordneten Elements sind.

Dies scheint genau dasselbe zu sein, aber sie funktionieren unterschiedlich.

Könnte jemand bitte erklären?

Ein übergeordnetes Element kann ein oder mehrere untergeordnete Elemente haben:

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

Unter diesen Kindern kann nur eines das erste sein. Dies entspricht :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Der Unterschied zwischen :first-childund :first-of-typebesteht darin, dass :first-of-typees mit dem ersten Element seines Elementtyps übereinstimmt, das in HTML durch seinen Tag-Namen dargestellt wird, auch wenn dieses Element nicht das erste untergeordnete Element des übergeordneten Elements ist . Bisher waren die untergeordneten Elemente, die wir betrachten, alle divs, aber ertrage es mit mir, ich werde gleich darauf zurückkommen.

Im Moment gilt auch das Gegenteil: Jedes :first-childist auch :first-of-typenotwendig. Da das erste Kind hier auch das erste ist div, entspricht es sowohl den Pseudoklassen als auch der Typauswahl div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Wenn Sie nun den Typ des ersten Kindes von divetwas anderem ändern h1, ist es immer noch das erste Kind, aber es ist divoffensichtlich nicht mehr das erste . stattdessen wird es das erste (und einzige) h1. Wenn divdiesem ersten untergeordneten Element innerhalb desselben übergeordneten Elements weitere Elemente folgen, stimmt das erste dieser divElemente überein div:first-of-type. Im angegebenen Beispiel wird das zweite Kind das erste, divnachdem das erste Kind in Folgendes geändert wurde 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>

Beachten Sie, dass dies :first-childäquivalent zu ist :nth-child(1).

Dies impliziert auch, dass jedes Element möglicherweise immer nur ein einzelnes untergeordnetes Element :first-childgleichzeitig hat, aber so viele untergeordnete Elemente haben kann und wird, die mit der :first-of-typePseudoklasse übereinstimmen, wie die Anzahl der Arten von untergeordneten Elementen . In unserem Beispiel entspricht der Selektor .parent > :first-of-type(mit einer impliziten *Qualifizierung des :first-of-typePseudos) zwei Elementen, nicht nur einem:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Gleiches gilt für :last-childund :last-of-type: jedes :last-childist notwendigerweise auch :last-of-type, da ihm absolut kein anderes Element innerhalb seines Elternteils folgt. Da das Letzte divauch das letzte Kind ist, h1kann das nicht das letzte Kind sein, obwohl es das letzte seiner Art ist.

:nth-child()und :nth-of-type()funktionieren im Prinzip sehr ähnlich, wenn sie mit einem beliebigen ganzzahligen Argument verwendet werden (wie im :nth-child(1)oben erwähnten Beispiel), aber wo sie sich unterscheiden, liegt in der möglichen Anzahl von Elementen, die mit übereinstimmen :nth-of-type(). Dies wird ausführlich in Was ist der Unterschied zwischen p: n-tem Kind (2) und p: n-tem Typ (2)?

Ich habe ein Beispiel erstellt, um den Unterschied zwischen first-childund first-of-typehier zu demonstrieren .

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

Das vollständige Beispiel finden Sie unter https://jsfiddle.net/bwLvyf3k/1/.

Der Unterschied zwischen dem Typ des ersten Kindes und dem Typ des ersten Kindes kann anhand des Beispiels verstanden werden. Sie müssen das folgende von mir erstellte Beispiel verstehen und es funktioniert wirklich. Sie können die Codes in Ihren Editor einfügen. Sie werden verstehen, was sie sind und wie Sie arbeiten

Code Nr. 1 für First-of-Type:

<!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>

Ergebnis

.p1, .p2, .p3 werden gestylt und ihre Farbe wird rot. Auch wenn wir .p1 nach dem zweiten Div setzen, wird sie rot sein.

Code Nr. 2 für das erste Kind:

<!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>

Ergebnis:

Wenn wir die .p2 nach der zweiten Div 2 setzen, wird sie nicht rot sein, aber im ersten Fall hat es funktioniert.