not: selettore del primo figlio

Ho un divtag contenente diversi ultag.

Sono in grado di impostare le proprietà CSS per la prima ul tag:

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

Tuttavia, i seguenti tentativi di impostare le proprietà CSS per ogni altro ultag tranne il primo non funzionano:

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

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

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

Come posso scrivere in CSS: "ogni elemento, tranne il primo"?

Una delle versioni che hai pubblicato funziona effettivamente per tutti i browser moderni (dove sono supportati i selettori CSS livello 3 ):

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

Se è necessario supportare i browser legacy o se si è ostacolati dalla limitazione:not del selettore (accetta solo un selettore semplice come argomento), è possibile utilizzare un'altra tecnica:

Definisci una regola che ha una portata maggiore di quella che intendi e poi "revoca" in modo condizionale, limitandone la portata a ciò che intendi:

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

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

Quando si limita l'ambito, utilizzare il valore predefinito per ciascun attributo CSS che si sta impostando.

Questa soluzione CSS2 ("any ulafter another ul") funziona anche ed è supportata da più browser.

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

Diversamente da :note :nth-sibling, il selettore fratello adiacente è supportato da IE7 +.

Se JavaScript modifica queste proprietà dopo il caricamento della pagina, è necessario esaminare alcuni bug noti nelle implementazioni di IE7 e IE8 . Vedi questo link .

Per qualsiasi pagina Web statica, questo dovrebbe funzionare perfettamente.

Dal momento che :notnon è accettato da IE6-8 , ti suggerirei questo:

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

Quindi scegli tutti ulnel suo elemento genitore tranne il primo .

Per ulteriori esempi, consultare l'articolo "Utile: ricette nth-child" di Chris Coyernth-child .

div li~li {
    color: red;
}

Supporta IE7

not(:first-child)non sembra più funzionare. Almeno con le versioni più recenti di Chrome e Firefox.

Invece, prova questo:

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

È possibile utilizzare qualsiasi selettore con 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)){}

Non ho avuto fortuna con alcuni dei precedenti,

Questo è stato l'unico che ha funzionato per me

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

Questo ha funzionato per me quando stavo cercando di far sì che il primo pulsante visualizzato sulla pagina non venisse effettuato da un'opzione margin-left.

questa è stata l'opzione che ho provato prima ma non ha funzionato

ul:not(:first-child)

Puoi usare il tuo selettore con :notun soffietto simile, puoi usare qualsiasi selettore all'interno di:not()

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

puoi usare anche :notsenza il selettore genitore.

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

Più esempi

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

Come ho usato ul:not(:first-child)è una soluzione perfetta.

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

Perché questo è perfetto perché ul:not(:first-child), usando , possiamo applicare CSS su elementi interni. Come li, img, span, atag ecc.

Ma quando vengono utilizzate altre soluzioni:

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

e

div li~li {
    color: red;
}

e

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

e

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

Questi limitano solo i CSS di livello ul. Supponiamo che non possiamo applicare CSS licome `div ul + ul li '.

Per gli elementi a livello interno la prima soluzione funziona perfettamente.

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

e così via ...