Wie kann ich mit CSS alle Elemente außer dem ersten untergeordneten Element formatieren?

Stilelemente außer dem Ersten: Erkundung des CSS-Selektors „not:first-child“

Im CSS-Stil wird der „not:first Mit dem Selektor „-child“ können Sie auf alle Elemente außer dem ersten in einer bestimmten Hierarchie abzielen. Obwohl es unkompliziert erscheint, kann die Anwendung dieses Selektors in bestimmten Szenarien eine Herausforderung sein.

CSS auf nicht erste Elemente anwenden

Betrachten wir ein Szenario, in dem Sie ein „div“ haben „Tag, der mehrere „ul“-Tags enthält. Um CSS-Eigenschaften für jedes „ul“-Tag außer dem ersten festzulegen, sollte der Code div ul:not(:first-child) funktionieren. Sollte dies jedoch fehlschlagen, gibt es hier einige Gründe:

• Browser-Unterstützung: Der „not:first-child“-Selektor wird in modernen Browsern unterstützt, ist aber möglicherweise nicht kompatibel mit ältere Browser.
• Selektorsyntax: Stellen Sie sicher, dass die Selektorsyntax korrekt ist, indem Sie einen Doppelpunkt (:) vor dem verwenden „Erstkind“-Deskriptor.

Alternativer Ansatz

Wenn „nicht:Erstkind“ nicht realisierbar ist, besteht ein alternativer Ansatz darin, zuerst das anzuwenden Stil auf alle Elemente anwenden und ihn dann für das erste Element „widerrufen“. Zum Beispiel:

div ul {
    background-color: #900;
}

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

In diesem Beispiel gilt die erste Regel für alle „ul“-Elemente, während die zweite Regel speziell die Hintergrundfarbe für das erste Element überschreibt.

Begrenzen des Bereichs und der Standardwerte

Wenn Sie den Bereich mit diesem alternativen Ansatz einschränken, setzen Sie das widerrufene CSS-Attribut auf seinen Standardwert. Dadurch wird sichergestellt, dass der ursprüngliche Stil nur für das erste Element überschrieben wird.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS alle Elemente außer dem ersten untergeordneten Element formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!