Ich habe ein div
Tag, das mehrere ul
Tags enthält.
Ich kann CSS-Eigenschaften nur für das erste ul
Tag festlegen :
div ul:first-child {
background-color: #900;
}
Meine folgenden Versuche, CSS-Eigenschaften für jedes andere ul
Tag außer dem ersten festzulegen, funktionieren jedoch nicht:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Wie kann ich in CSS schreiben: "jedes Element außer dem ersten"?
quelle
Diese CSS2-Lösung ("jede
ul
nach der anderenul
") funktioniert ebenfalls und wird von mehr Browsern unterstützt.Im Gegensatz zu
:not
und:nth-sibling
wird der benachbarte Geschwister-Selektor von IE7 + unterstützt.Wenn JavaScript diese Eigenschaften nach dem Laden der Seite ändert, sollten Sie sich einige bekannte Fehler in den IE7- und IE8- Implementierungen ansehen . Siehe diesen Link .
Für jede statische Webseite sollte dies perfekt funktionieren.
quelle
ul ul div ul
(wo diese Elemente Geschwister sind) nur die zweite ul ausgewählt wird, da die letzte keineul
vorherige vor sich hatDa
:not
dies von IE6-8 nicht akzeptiert wird , würde ich Ihnen Folgendes vorschlagen:Sie wählen also jedes
ul
Element in seinem übergeordneten Element aus, mit Ausnahme des ersten .Weitere Beispiele finden Sie in Chris Coyers Artikel "Nützlich: Rezepte für das n-te Kind" .
nth-child
quelle
Unterstützt IE7
quelle
not(:first-child)
scheint nicht mehr zu funktionieren. Zumindest mit den neueren Versionen von Chrome und Firefox.Versuchen Sie stattdessen Folgendes:
quelle
ul:not(:first-child)
bedeutet wörtlich "jedesul
Element, das nicht das erste Kind seines Elternteils ist", daher stimmt es nicht einmal mit dem ersten überein,ul
wenn ihm ein anderes Element (p
, eine Überschrift usw.) vorangestellt ist . Im Gegenteilul:not(:first-of-type)
bedeutet "jedesul
Element außer dem 1.ul
im Container". Sie haben Recht, dass OP wahrscheinlich das letztere Verhalten benötigt hat, aber Ihre Erklärung ist eher irreführend.Sie können jeden Selektor mit verwenden
not
quelle
Ich hatte kein Glück mit einigen der oben genannten,
Dies war der einzige, der tatsächlich für mich arbeitete
ul:not(:first-of-type) {}
Dies funktionierte für mich, als ich versuchte, die erste Schaltfläche auf der Seite anzuzeigen, die nicht durch eine Option am linken Rand beeinflusst wurde.
Dies war die Option, die ich zuerst ausprobiert habe, aber sie hat nicht funktioniert
ul:not(:first-child)
quelle
Sie können Ihren Selektor
:not
wie folgt verwenden. Sie können jeden Selektor innerhalb des verwenden:not()
Mehr Beispiele
quelle
Wie ich es benutzt habe
ul:not(:first-child)
ist eine perfekte Lösung.Warum ist dies perfekt, weil
ul:not(:first-child)
wir mit CSS auf innere Elemente anwenden können? Wieli, img, span, a
Tags etc.Aber wenn andere Lösungen verwendet werden:
und
und
und
Diese beschränken nur CSS auf ul-Ebene. Angenommen, wir können CSS nicht
li
als "div ul + ul li" anwenden .Für Elemente der inneren Ebene funktioniert die erste Lösung perfekt.
und so weiter ...
quelle