Heim >Web-Frontend >CSS-Tutorial >Wie kann ich das erste Element mithilfe von CSS-Selektoren ausschließen?

Wie kann ich das erste Element mithilfe von CSS-Selektoren ausschließen?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-01 00:53:10283Durchsuche

How Can I Exclude the First Element Using CSS Selectors?

Ausschließen des ersten Elements mit dem CSS-Selektor :not:first-child

In CSS zielt der Selektor :first-child auf das erste ab untergeordnetes Element seines übergeordneten Elements. Um das erste Element auszuschließen, können Sie den inversen Selektor :not:first-child verwenden.

Versuch 1: Verwendung von :not:first-child

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

Versuch 2: Verwenden :not(:first-child)

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

Versuch 3: Verwendung von :first-child:after

div ul:first-child:after {
    background-color: #900;
}

Jedoch nichts davon Methoden erzielten das gewünschte Ergebnis.

Lösung: Verwendung der Browserkompatibilität Fix

Der :not-Selektor akzeptiert nur einen einfachen Selektor als Argument. Um ältere Browser zu unterstützen, die die Syntax :not(:first-child) nicht unterstützen, können Sie daher eine alternative Technik anwenden:

  1. Definieren Sie eine Regel mit einem breiteren Geltungsbereich als beabsichtigt:
div ul {
    background-color: #900;
}
  1. Widerrufen Sie die Regel bedingt, um ihren Geltungsbereich auf die Ausgeschlossenen zu beschränken Element:
div ul:first-child {
    background-color: transparent;
}

Erklärung:

Die erste Regel wendet die Hintergrundfarbe auf alle ul-Elemente an. Die zweite Regel verwendet den Standardwert (transparent) für die Hintergrundfarbe und entfernt so effektiv die Hintergrundfarbe aus dem ersten untergeordneten ul-Element.

Das obige ist der detaillierte Inhalt vonWie kann ich das erste Element mithilfe von CSS-Selektoren ausschließen?. 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