Warum formatiert „DIV.section DIV:first-child' nicht nur das erste direkte untergeordnete Element?

Spezifität direkter untergeordneter Selektoren

Bei der Anwendung von CSS auf HTML-Elemente ist es wichtig, die Spezifität von Selektoren zu verstehen. In Ihrem Szenario scheint der Selektor DIV.section DIV:first-child sowohl die Divs „sub content 1“ als auch „header“ zu formatieren.

Der Selektor soll jedoch nur mit dem ersten direkten untergeordneten Element übereinstimmen eines div mit der Klasse „section“. Lassen Sie uns aufschlüsseln, warum der ursprüngliche Selektor nicht wie erwartet funktioniert.

Direkter Nachkomme vs. direktes Kind verstehen

Die Pseudoklasse :first-child wählt das erste Kind aus eines Elements. In Ihrem Fall wenden Sie es jedoch auf DIV.section DIV an, was bedeutet: „Wählen Sie alle Divs aus, die Nachkommen eines Divs mit der Klasse ‚Abschnitt‘ sind“. Dies schließt sowohl direkte als auch verschachtelte Kinder ein.

Verwendung des Direct Descendant Selector

Um nur das erste direkte Kind eines Divs mit der Klasse „Abschnitt“ anzusprechen, müssen Sie sollte den Selektor für direkte Nachkommen (>) verwenden. Dieser Operator gleicht Elemente ab, die unmittelbar untergeordnete Elemente eines bestimmten übergeordneten Elements sind. Der geänderte Selektor wäre:

div.section > div:first-child

Dieser Selektor formatiert nur das „Header“-Div korrekt, da es das erste unmittelbare Kind des Div mit der Klasse „Abschnitt“ ist.

Problem mit älteren Browsern

Beachten Sie, dass der direkte Nachkommenselektor in älteren Browsern wie Internet Explorer 6 nicht unterstützt wird. Bei Bedarf Um solche Browser zu unterstützen, müssen Sie möglicherweise alternative Methoden verwenden, z. B. das Hinzufügen von Klassen zu den untergeordneten Divs.

Das obige ist der detaillierte Inhalt vonWarum formatiert „DIV.section DIV:first-child' nicht nur das erste direkte untergeordnete Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!