Ich kann den Unterschied zwischen element:first-child
und 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?
css
css-selectors
BoltClock
quelle
quelle
Antworten:
Ein übergeordnetes Element kann ein oder mehrere untergeordnete Elemente haben:
Unter diesen Kindern kann nur eines das erste sein. Dies entspricht
:first-child
:Der Unterschied zwischen
:first-child
und:first-of-type
besteht darin, dass:first-of-type
es 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, allediv
s, aber ertrage es mit mir, ich werde gleich darauf zurückkommen.Im Moment gilt auch das Gegenteil: Jedes
:first-child
ist auch:first-of-type
notwendig. Da das erste Kind hier auch das erste istdiv
, entspricht es sowohl den Pseudoklassen als auch der Typauswahldiv
:Wenn Sie nun den Typ des ersten Kindes von
div
etwas anderem ändernh1
, ist es immer noch das erste Kind, aber es istdiv
offensichtlich nicht mehr das erste . stattdessen wird es das erste (und einzige)h1
. Wenndiv
diesem ersten untergeordneten Element innerhalb desselben übergeordneten Elements weitere Elemente folgen, stimmt das erste dieserdiv
Elemente übereindiv:first-of-type
. Im angegebenen Beispiel wird das zweite Kind das erste,div
nachdem das erste Kind in Folgendes geändert wurdeh1
: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-child
gleichzeitig hat, aber so viele untergeordnete Elemente haben kann und wird, die mit der:first-of-type
Pseudoklasse ü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-type
Pseudos) zwei Elementen, nicht nur einem:Gleiches gilt für
:last-child
und:last-of-type
: jedes:last-child
ist notwendigerweise auch:last-of-type
, da ihm absolut kein anderes Element innerhalb seines Elternteils folgt. Da das Letztediv
auch das letzte Kind ist,h1
kann 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)?quelle
Ich habe ein Beispiel erstellt, um den Unterschied zwischen
first-child
undfirst-of-type
hier zu demonstrieren .HTML
CSS
Das vollständige Beispiel finden Sie unter https://jsfiddle.net/bwLvyf3k/1/.
quelle
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:
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:
Ergebnis:
Wenn wir die .p2 nach der zweiten Div 2 setzen, wird sie nicht rot sein, aber im ersten Fall hat es funktioniert.
quelle