Warum wählt „:first-child' nicht „Mein H1' aus?

Warum :first-child nicht das erwartete H1 auswählt

Im dargestellten Szenario besteht das Ziel darin, das erste h1-Element einzufärben innerhalb eines div mit der Klasse detail_container blue. Das verwendete CSS (:first-child) geht davon aus, dass das Zielelement das erste untergeordnete Element seines übergeordneten Elements ist, aber in diesem Fall ist das erste untergeordnete Element des übergeordneten Elements das ul-Element.

Verstehen von :first-child

Der :first-child-Selektor wählt das erste untergeordnete Element eines angegebenen übergeordneten Elements aus, das den angegebenen Kriterien entspricht. Im bereitgestellten Code ist das Kriterium „h1“, aber da das erste untergeordnete Element des div das ul ist, gilt der :first-child-Selektor nicht für das h1-Element.

Alternative Lösung mit :first-of-type

CSS3 führt den :first-of-type-Selektor ein, der das erste Vorkommen eines Elementtyps innerhalb seines auswählt Elternteil. In diesem Szenario würde das Ersetzen von :first-child durch :first-of-type das Problem beheben:

.detail_container h1:first-of-type {
  color: blue;
}

Überlegungen zur Browserkompatibilität

Allerdings:first- of-type hat im Vergleich zu :first-child eine eingeschränkte Browserkompatibilität.

Empfohlene Lösung mit Klasse

Eine praktischere und browserübergreifende kompatiblere Lösung besteht darin, dem Ziel-h1-Element eine Klasse zuzuweisen und es entsprechend zu formatieren:

.detail_container h1.first {
  color: blue;
}

Das obige ist der detaillierte Inhalt vonWarum wählt „:first-child' nicht „Mein H1' aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!