Heim >Web-Frontend >CSS-Tutorial >Wie kann ich alle außer dem ersten Element in einer Reihe mit dem CSS-Selektor „:not(:first-child)' formatieren?

Wie kann ich alle außer dem ersten Element in einer Reihe mit dem CSS-Selektor „:not(:first-child)' formatieren?

Susan Sarandon
Susan SarandonOriginal
2024-12-02 12:55:13250Durchsuche

How Can I Style All but the First Element in a Series Using CSS's `:not(:first-child)` Selector?

Beherrschung des Not:First-Child-Selektors zur CSS-Beherrschung

Frage:

Wie ziele ich effektiv auf jedes Element ab? außer dem ersten in einer Reihe von Elementen, die den CSS-Selektor not:first-child verwenden? Diese Trennung stellt eine Herausforderung dar, wenn man versucht, bestimmte Elemente zu formatieren und dabei das erste Vorkommen auszuschließen.

Antwort:

Um diese Trennung zu erreichen, gibt es zwei praktikable Ansätze:

1. Verwendung von :not Selector (moderne Browser):

Für moderne Browser, die CSS-Selektoren Level 3 unterstützen, zielt der folgende Selektor genau auf alle Elemente außer dem ersten ab:

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

2. Widerrufen des bedingten Bereichs:

Für ältere Browser oder bestimmte Szenarien, in denen der :not-Selektor eingeschränkt ist, können Sie die folgende Technik anwenden:

  1. Legen Sie zunächst eine Regel fest, die gilt für alle Elemente des gewünschten Typs (z. B. alle
      -Tags innerhalb eines
      ):
div ul {
    background-color: #900;
}
  1. Erstellen Sie eine Regel, um diesen Stil ab dem ersten Element zu widerrufen, und setzen Sie die anwendbaren CSS-Attribute auf ihre Standardwerte:
div ul:first-child {
    background-color: transparent;
}

Durch das bedingte Widerrufen des Stils zielen Sie effektiv auf jedes Element außer dem ersten ab. Dieser Ansatz bietet Kompatibilität mit älteren Browsern und ermöglicht eine detailliertere Kontrolle über den Stilausschluss.

Das obige ist der detaillierte Inhalt vonWie kann ich alle außer dem ersten Element in einer Reihe mit dem CSS-Selektor „:not(:first-child)' formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn