Wie formatiere ich alle außer dem ersten untergeordneten Element in verschachtelten CSS-Selektoren?

Arbeiten mit verschachtelten Selektoren: Verwendung von not:first-child

Das Auswählen bestimmter Elemente innerhalb einer verschachtelten Struktur kann in CSS eine Herausforderung sein. Wenn Sie auf ein Szenario stoßen, in dem Sie Stile auf alle außer dem ersten Element in einer Gruppe anwenden müssen, kommt der Not:First-Child-Selektor ins Spiel.

Ein Ansatz, den Sie versucht haben, div ul:not:first- Kind, funktioniert leider nicht. Dies liegt daran, dass der Not:First-Child-Selektor einen einfachen Selektor als Argument erwartet, was bedeutet, dass div ul in diesem Kontext ungültig ist.

Die korrekte Syntax für den Not:First-Child-Selektor lautet:

div ul:not(:first-child) {
    background-color: #900;
}

Dieser Selektor zielt auf jedes UL-Element ab, das nicht das erste untergeordnete Element seines übergeordneten Div ist.

Jedoch für die Unterstützung älterer Browser oder für Um die Einschränkungen des :not-Selektors zu umgehen, kann eine alternative Technik verwendet werden:

1. Definieren Sie eine Regel mit einem größeren Umfang als beabsichtigt und weisen Sie allen Elementen den gewünschten Stil zu.
2. Erstellen eine spezifischere Regel mit einem engeren Geltungsbereich.
3. In der engeren Regel setzen Sie die Stileigenschaften für Elemente, die eine bestimmte Bedingung erfüllen, z. B. dass sie das erste sind, auf ihre Standardwerte zurück untergeordnetes Element.

In diesem Codeausschnitt wenden wir beispielsweise eine Hintergrundfarbe auf alle ul-Elemente an, aber die zweite Regel überschreibt den Stil für das erste untergeordnete Element:

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

Durch die Verwendung entweder des Not:First-Child-Selektors oder der alternativen Technik können Sie verschachtelte Elemente effektiv ansprechen und formatieren, ohne das erste Kind zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie formatiere ich alle außer dem ersten untergeordneten Element in verschachtelten CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!