Wie wähle ich mithilfe von CSS nur das direkte untergeordnete Element eines DIV aus?

CSS-Selektor für direktes untergeordnetes Element

Sie möchten CSS auf das erste direkte untergeordnete Element eines DIV mit der Klasse „Abschnitt“ anwenden. Sie stoßen jedoch auf ein unerwartetes Verhalten, bei dem sich der Stil auf mehr als nur das gewünschte Element auswirkt.

Der von Ihnen verwendete Selektor ist „DIV.section DIV:first-child“. Dieser Selektor gleicht jedes DIV ab, das sich innerhalb eines DIV mit der Klasse „Abschnitt“ befindet und das erste untergeordnete Element seines übergeordneten Elements ist. In Ihrem HTML befindet sich das DIV „Unterinhalt 1“ jedoch in einem anderen DIV, das das erste untergeordnete Element des DIV „Abschnitt“ ist, daher die unerwartete Anwendung des Stils.

Um dieses Problem zu beheben, können Sie Folgendes verwenden: ein genauerer Selektor:

Für beide Kinder des Haupt-DIV:

div.section > div

Dieser Selektor verwendet die ">" Symbol, das Elemente auswählt, die direkte untergeordnete Elemente des angegebenen übergeordneten Elements sind. In diesem Fall werden nur die beiden DIVs abgeglichen, die direkte untergeordnete Elemente des „Abschnitts“-DIV sind.

Nur ​​für den Header:

div.section > div:first-child

Dieser Selektor kombiniert die vorherige mit der Pseudoklasse „:first-child“ und stellt so sicher, dass nur das erste direkte Kind des „section“-DIV ausgewählt wird. Dies zielt ausschließlich auf das „Header“-DIV ab.

Beachten Sie, dass das „>“ Das Symbol wird von allen gängigen Browsern außer IE6 unterstützt. Wenn die IE6-Unterstützung von entscheidender Bedeutung ist, müssen Sie möglicherweise einen alternativen Ansatz verwenden, z. B. das Hinzufügen von Klassen zu den untergeordneten DIVs und deren direktes Formatieren.

Das obige ist der detaillierte Inhalt vonWie wähle ich mithilfe von CSS nur das direkte untergeordnete Element eines DIV aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!