Frage Was ist der Unterschied zwischen: First-Child und: First-of-Type?


Ich kann den Unterschied nicht unterscheiden element:first-child und element:first-of-type

Zum Beispiel, du hattest ein div

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

div:first-of-type
→ Alle <div> Elemente, die die ersten sind <div> Element ihres Elternteils.

Das scheint genau dasselbe zu sein, aber sie funktionieren anders.

Könnte jemand bitte erklären?


75
2017-07-09 15:19


Ursprung


Antworten:


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

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

Unter diesen Kindern kann nur einer von ihnen der Erste sein. Dies ist abgestimmt auf :first-child:

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

Der Unterschied zwischen :first-child und :first-of-type ist das :first-of-type passt das erste Element seines Elementtyps an, das in HTML durch seinen Tag-Namen repräsentiert wird, auch wenn dieses Element nicht das erste Kind des Elternteils ist. Bisher sind die Kinderelemente, die wir betrachten, alle gewesen divs, aber ertragen Sie mit mir, ich komme gleich dazu.

Fürs Erste gilt auch das Gegenteil: Irgendwelche :first-child ist auch :first-of-type bei Notwendigkeit. Da ist das erste Kind hier auch das erste divEs wird übereinstimmen beide Pseudo-Klassen, sowie der Typ Selektor 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 jetzt den Typ des ersten untergeordneten Elements ändern div zu etwas anderem, wie h1Es wird immer noch das erste Kind sein, aber es wird nicht mehr das erste sein div offensichtlich; stattdessen wird es das erste (und einzige) h1. Wenn es andere gibt div Elemente, die diesem ersten Kind innerhalb desselben Elternteils folgen, der erste von ihnen div Elemente werden dann übereinstimmen div:first-of-type. In dem gegebenen Beispiel wird das zweite Kind das erste Kind div nachdem das erste Kind in ein 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 :first-child ist äquivalent zu :nth-child(1).

Dies bedeutet auch, dass jedes Element möglicherweise nur ein einziges untergeordnetes Element aufweist :first-child Zu einer Zeit kann und wird es so viele Kinder haben, die dem entsprechen :first-of-type Pseudo-Klasse als die Anzahl der Arten von Kindern, die es hat. In unserem Beispiel der Selektor .parent > :first-of-type (mit einem impliziten * qualifizieren die :first-of-type pseudo) wird übereinstimmen zwei Elemente, nicht nur eins:

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

Das Gleiche gilt für :last-child und :last-of-type: irgendein :last-child ist notwendigerweise auch :last-of-type, denn absolut kein anderes Element folgt ihm innerhalb seines Elternteils. Aber, weil die letzte div ist auch das letzte Kind, das h1 kann nicht das letzte Kind sein, obwohl es das letzte seiner Art ist.


132
2017-07-09 15:27



Ich habe ein Beispiel erstellt, um den Unterschied zu demonstrieren first-child und first-of-type Hier.

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

Um das vollständige Beispiel zu sehen, besuchen Sie bitte https://jsfiddle.net/bwLvyf3k/1/


9