nicht: Erstkind-Selektor

Ich habe ein divTag, das mehrere ulTags enthält.

Ich kann CSS-Eigenschaften nur für das erste ulTag festlegen :

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

Meine folgenden Versuche, CSS-Eigenschaften für jedes andere ulTag 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"?

Eine der Versionen , die Sie geschrieben tatsächlich funktioniert für alle modernen Browser (wo CSS - Selektoren Level 3 werden unterstützt ):

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

Wenn Sie ältere Browser unterstützen müssen oder wenn Sie durch die Einschränkung des :notSelektors behindert werden (es wird nur ein einfacher Selektor als Argument akzeptiert ), können Sie eine andere Technik verwenden:

Definieren Sie eine Regel, die einen größeren Geltungsbereich hat als beabsichtigt, und "widerrufen" Sie sie dann unter bestimmten Bedingungen, wobei Sie den Geltungsbereich auf das beschränken, was Sie beabsichtigen:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Verwenden Sie zum Einschränken des Bereichs den Standardwert für jedes CSS-Attribut, das Sie festlegen.

Diese CSS2-Lösung ("jede ulnach der anderen ul") funktioniert ebenfalls und wird von mehr Browsern unterstützt.

div ul + ul {
  background-color: #900;
}

Im Gegensatz zu :notund :nth-siblingwird 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.

Da :notdies von IE6-8 nicht akzeptiert wird , würde ich Ihnen Folgendes vorschlagen:

div ul:nth-child(n+2) {
    background-color: #900;
}

Sie wählen also jedes ulElement 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

div li~li {
    color: red;
}

Unterstützt IE7

not(:first-child)scheint nicht mehr zu funktionieren. Zumindest mit den neueren Versionen von Chrome und Firefox.

Versuchen Sie stattdessen Folgendes:

ul:not(:first-of-type) {}

Sie können jeden Selektor mit verwenden not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

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)

Sie können Ihren Selektor :notwie folgt verwenden. Sie können jeden Selektor innerhalb des verwenden:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

Sie können auch :notohne übergeordneten Selektor verwenden.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Mehr Beispiele

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Wie ich es benutzt habe ul:not(:first-child)ist eine perfekte Lösung.

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

Warum ist dies perfekt, weil ul:not(:first-child)wir mit CSS auf innere Elemente anwenden können? Wie li, img, span, aTags etc.

Aber wenn andere Lösungen verwendet werden:

div ul + ul {
  background-color: #900;
}

und

div li~li {
    color: red;
}

und

ul:not(:first-of-type) {}

und

div ul:nth-child(n+2) {
    background-color: #900;
}

Diese beschränken nur CSS auf ul-Ebene. Angenommen, wir können CSS nicht lials "div ul + ul li" anwenden .

Für Elemente der inneren Ebene funktioniert die erste Lösung perfekt.

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

und so weiter ...