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
Freigeben: 2024-12-01 00:53:10
Original
217 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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

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

Versuch 3: Verwendung von :first-child:after

div ul:first-child:after {
    background-color: #900;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
  1. Widerrufen Sie die Regel bedingt, um ihren Geltungsbereich auf die Ausgeschlossenen zu beschränken Element:
div ul:first-child {
    background-color: transparent;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage