:first-child vs. :first-of-type: When Should I Use Each CSS Pseudo-class?

Elementauswahl mit :first-child vs. :first-of-type

In CSS die Pseudoklassen :first-child und :first-of-type wählen beide Elemente basierend auf ihrer Position innerhalb ihres übergeordneten Elements aus. Sie unterscheiden sich jedoch darin, wie sie „first“ definieren.

Element:first-child

:first-child wählt unabhängig davon das erste untergeordnete Element seines angegebenen übergeordneten Elements aus seines Elementtyps. Im bereitgestellten Beispiel:

div:first-child

Nach dem Login kopieren

Dieser Selektor würde mit allen

Elemente, die das erste untergeordnete Element ihres übergeordneten Elements sind. Wenn das übergeordnete Element andere Elementtypen enthält, werden diese nicht ausgewählt.

Element:first-of-type

:first-of-type wählt den ersten aus Instanz eines bestimmten Elementtyps innerhalb seines übergeordneten Elements. Es entspricht dem ersten

Element, auch wenn es insgesamt nicht das erste untergeordnete Element ist. Zum Beispiel:

div:first-of-type

Nach dem Login kopieren

Im bereitgestellten HTML:

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

Nach dem Login kopieren

:first-of-type würde das

mit der Klasse „parent“ als erster Instanz eines

Element, während das

mit der ID „first“ wäre die erste Instanz eines

element.

Hauptunterschiede

Elementhierarchie: :First-Child-Übereinstimmungen basierend auf der Child-Reihenfolge, während :First-of- Typübereinstimmungen basierend auf Elementtyp und Position innerhalb dieses Typs.

Anzahl von Übereinstimmungen: :first-child kann nur mit einem Element pro übergeordnetem Element übereinstimmen, während :first-of-type mit mehreren Elementen desselben Typs übereinstimmen kann.

Spezifität: :first- of-type hat im Allgemeinen eine höhere Spezifität als :first-child, was bedeutet, dass es in CSS Vorrang hat Regeln.

Beispielverwendung

Verwenden Sie :first-child, um Folgendes auszuwählen:

Das erste Listenelement in einer ungeordneten Liste: ul li:first-child

Der Titel des ersten Blogbeitrags in eine Liste: Artikel .blog-post:first-child h2

Verwenden Sie :first-of-type, um Folgendes auszuwählen:

Die erste Überschrift (
,
usw.) in einem Dokument: Hauptteil :first-of-type

Die erste Schaltfläche in einem Formular: Formularschaltfläche:first-of-type

Das obige ist der detaillierte Inhalt von:first-child vs. :first-of-type: Wann sollte ich die einzelnen CSS-Pseudoklassen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich die Sichtbarkeit der Bildlaufleiste unter macOS für Trackpad-Benutzer in WebKit-/Blink-Browsern sicherstellen? Nächster Artikel：Wie kann ich den Text in einem HTML-Container mit fester Breite ordnungsgemäß umbrechen?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2166

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2316

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1950

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...