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

Der Inhalt dieses Artikels befasst sich mit dem Unterschied zwischen Erstling und Erstkind. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen helfen.

Die obige Erklärung scheint schwer verständlich zu sein, und Sie müssen sie mit Beispielen kombinieren, um sie wirklich zu verstehen.

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1): first-child

h1:first-child: Das h1-Element wird ausgewählt, da das h1-Element das erste untergeordnete Element des div ist.

p:first-child: Es kann kein Element ausgewählt werden, da p nicht das erste untergeordnete Element von div, sondern das zweite untergeordnete Element von div ist.

span:first-child: Es kann kein Element ausgewählt werden, da span nicht das erste untergeordnete Element des div, sondern das dritte untergeordnete Element des div ist

(2): first-; of-type

h1: first-of-type: Das h1-Element wird ausgewählt, da das h1-Element das erste h1-Element unter allen h1-Elementen im div ist. Tatsächlich gibt es nur ein untergeordnetes Element von h1 ;

p: erstes Element: Das p-Element ist das erste p-Element unter allen p-Elementen im div. Tatsächlich gibt es nur ein untergeordnetes Element von p ;

span: first-of-type: Das span-Element mit id="first" ist ausgewählt. Da das div-Element zwei span-Elemente enthält, wählen wir das erste der beiden aus.

Zusammenfassung:

„:first-child“ wählt das erste untergeordnete Element unter dem übergeordneten Element aus (unabhängig vom Elementtyp), während „:first-of-type“ das übergeordnete Element auswählt erstes untergeordnetes Element des nächsten Elementtyps (Unterscheidung zwischen Elementtypen).

„:last-child“ und „:last-of-type“, „nth-child(n)“ und „:nth-of-type(n)“ können auch so verstanden werden, Es bedarf keiner weiteren Erläuterung.

Das Obige ist eine vollständige Einführung in den Unterschied zwischen First-of-Type und First-Child. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen First-of-Type und First Child?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!