not:first-child Selektor

Question

Ich habe eine div Tag mit mehreren ul Tags.

Ich kann die CSS-Eigenschaften für die erste ul nur Tag:

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

Meine folgenden Versuche, CSS-Eigenschaften füreinander festzulegen, sind jedoch ul Tag, außer dem ersten, funktionieren 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"?

Answer 1

div li~li {
    color: red;
}

Unterstützt IE7

Answer 2

Sie können jeden Selektor mit 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)){}

Answer 3

Sie können Ihren Selektor verwenden mit :not wie unten können Sie jeden Selektor innerhalb der :not()

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

y :not auch ohne übergeordneten Selektor.

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

Weitere 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*/
}

Answer 4

Mit einigen der oben genannten habe ich kein Glück gehabt,

Das war die einzige, die bei mir tatsächlich funktioniert hat

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

Dies funktionierte bei mir, als ich versuchte, die erste auf der Seite angezeigte Schaltfläche nicht durch eine margin-left-Option zu beeinträchtigen.

Diese Option habe ich zuerst ausprobiert, aber sie hat nicht funktioniert.

ul:not(:first-child)

Answer 5

Wie ich früher ul:not(:first-child) ist eine perfekte Lösung.

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

Warum ist das perfekt, denn durch die Verwendung von ul:not(:first-child) können wir CSS auf innere Elemente anwenden. Wie li, img, span, a Tags usw.

Aber wenn andere Lösungen verwendet werden:

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

y

div li~li {
    color: red;
}

y

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

y

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

Diese beschränken nur die CSS-Ebene ul. Nehmen wir an, wir können CSS nicht anwenden auf li als `div ul + ul li'.

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

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

und so weiter ...