nicht:first-child-Selektor

Ich habe eine div tag mit mehreren ul tags.

Ich bin in der Lage, CSS-Eigenschaften für die erste ul tag nur:

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

Jedoch meine folgenden versuche, die CSS-Eigenschaften für jede andere ul tag außer dem ersten nicht funktionieren:

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 schreiben CSS: "jedes element, außer dem ersten"?

InformationsquelleAutor OTAR | 2012-09-05

css css-selectors

1242

Einer der Versionen, die Sie geschrieben tatsächlich funktioniert für alle modernen Browser (wo CSS Selektoren level 3 sind unterstützt):
```
div ul:not(:first-child) {
    background-color: #900;
}
```
Wenn Sie Bedarf an Unterstützung von älteren Browsern, oder wenn Sie gehindert werden, durch die :not Selektor Einschränkung (es akzeptiert nur ein einfache Selektor als argument), dann können Sie verwenden eine andere Technik:

Definieren Sie eine Regel, hat eine größere Tragweite als das, was Sie wollen und dann "widerrufen" es bedingt eine Beschränkung Ihres Geltungsbereichs auf das, was Sie tun wollen:
```
div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}
```
Wenn die Begrenzung des Umfangs Nutzung der default-Wert für jedes CSS-Attribut, das Sie einstellen.
- Sie wissen genau, welche Versionen dies nicht unterstützt?
- In der Praxis alles, aber IE < 9 unterstützt. Eine großartige Ressource für diese Art von Informationen caniuse.com.
- Hmm.. watch out für die die Einschränkungen der ersten Lösung: caniuse.com/#feat=css-not-sel-list Der zweite Klang vernünftig für mich. Danke!
InformationsquelleAutor Jon
147

Diese CSS2-Lösung ("alle ul nach dem anderen ul") funktioniert auch und wird unterstützt von mehr Browsern.
```
div ul + ul {
  background-color: #900;
}
```
Im Gegensatz zu :not und :nth-sibling, die adjacent sibling selector wird unterstützt von IE7+.

Wenn Sie JavaScript änderungen dieser Eigenschaften nach dem laden der Seite, sollten Sie einen Blick auf einige bekannte Fehler in der IE7 und IE8 Implementierungen dieser. Finden Sie unter diesem link.

Für alle statischen web-Seite, dies sollte perfekt funktionieren.
- Das " + " - Selektor scheint nicht zu funktionieren im IE7.
- Dass quirksmode link sagt, sollte es funktionieren im IE7, aber nur statisch. Wenn Ihr JS stellt ein weiteres element im Vordergrund, es werden möglicherweise nicht korrekt aktualisiert werden. Ist, dass das Problem, das Sie sah?
- mag auch erwähnenswert sein, dass in einer Sequenz von Elementen wie: ul ul div ul (wo diese Elemente Geschwister sind), nur das zweite ul ausgewählt werden, da die Letzte nicht über ein ul zurück, um sich
InformationsquelleAutor Alex Quinn
71

Seit :not wird nicht akzeptiert IE6-8, würde ich dir empfehlen diese:
```
div ul:nth-child(n+2) {
    background-color: #900;
}
```
So Holen Sie jeden ul im übergeordneten element außer dem ersten.

Siehe Chris Coyer ' s "Nützlich :nth-child Rezepte" Artikel für mehr nth-child Beispiele.
- wer tatsächlich immer noch verwendet, IE6-8 in 2019?
- In Anbetracht der Antwort war von 2013?
InformationsquelleAutor ed1nh0
15
```
div li~li {
    color: red;
}
```
Unterstützt IE7

InformationsquelleAutor zloctb
11

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

Stattdessen versuchen Sie dies:
```
ul:not(:first-of-type) {}
```
- Sie funktionieren beide, aber Sie haben unterschiedliche Bedeutung. ul:not(:first-child) bedeutet wörtlich "alle ul element, das ist nicht das erste Kind seiner Eltern", so wird es nicht passen auch der 1. ul wenn es vorausgeht einem anderen element (p, Position usw.). Im Gegenteil, ul:not(:first-of-type) bedeutet "jeder ul element außer der 1. ul im container". Sie haben Recht, dass die OP wohl nötig letztere Verhalten, aber Ihre Erklärung ist ziemlich irreführend.
InformationsquelleAutor Vinny Troia

Können Sie jede Auswahl 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)){}

InformationsquelleAutor

3

Hatte ich nicht das Glück mit einigen der oben genannten,

Diese war die einzige, die wirklich für mich gearbeitet

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

Dieser arbeitete für mich, wenn ich versuchte, die erste Schaltfläche angezeigt, auf der Seite nicht beeinflusst werden durch einen margin-left-option.

war dies die option ich zuerst versucht aber es hat nicht funktioniert

ul:not(:first-child)

InformationsquelleAutor newtron54

Können Sie Ihre Auswahl mit :not wie Balg, die Sie verwenden können jeder Selektor innerhalb der :not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}
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*/
}

InformationsquelleAutor Nasser

0

Da ich ul:not(:first-child) ist die perfekte Lösung.
```
div ul:not(:first-child) {
    background-color: #900;
}
```
Warum ist dies eine perfekte, weil durch die Verwendung ul:not(:first-child) können wir die CSS auf innere Elemente. Wie li, img, span, a tags etc.

Aber wenn andere Lösungen:
```
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 Schränken nur ul-level CSS. Nehmen wir an, wir können nicht CSS anzuwenden auf li als `div ul + ul-li'.

Für die inneren Elemente die erste Lösung funktioniert perfekt.
```
div ul:not(:first-child) li{
        background-color: #900;
    }
```
und so weiter ...

InformationsquelleAutor Gufran Hasan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.