nth-child non risponde alla class

È ansible ottenere lo pseudo-selettore nth-child per lavorare con una class specifica?

Vedi questo esempio: http://jsfiddle.net/fZGvH/

Voglio che il secondo DIV.red diventi rosso, ma non applica il colore come previsto.

Non solo, ma quando lo specifichi, cambia il 5 ° DIV in rosso:

div.red:nth-child(6) 

Quando lo specifichi, cambia l’8 ° DIV in rosso:

 div.red:nth-child(9) 

Sembra essere un DIV dietro. Nell’esempio ci sono solo 8 tag DIV quindi non so perché nth-child (9) funzioni. Test utilizzando Firefox 3.6, ma nel mio codice di produzione attuale lo stesso problema si verifica in Chrome. Non capisco qualcosa su come dovrebbe funzionare, apprezzerei il chiarimento.

Inoltre, questo cambierà il 6 ° DIV in rosso, ma quello che voglio veramente è che cambi il secondo DIV.red in rosso:

 div.red:nth-of-type(6) 

E non capisco perché nth-child () e nth-of-type () rispondano in modo diverso, dal momento che nel documento ci sono solo otto tag dello stesso tipo.

Non c’è modo di filtrare per class in CSS perché non esiste un selettore :nth-of-class() . Un modo per aggirare questo è mettere i due diversi tipi di div nei propri gruppi, quindi selezionare in base a quei gruppi. Per esempio:

 

Con questo selettore:

 div.red div:nth-child(2) { background: red; } 

Riguardo l’ultimo bit della tua domanda:

E non capisco perché nth-child () e nth-of-type () rispondano in modo diverso, dal momento che nel documento ci sono solo otto tag dello stesso tipo.

Per il codice che ci dai non dovrebbe esserci alcuna differenza. L’ho provato e le due pseudo-classi funzionano come previsto. Ma, in generale:

:nth-child() opera su un intero livello di fratelli senza riguardo per altri selettori semplici. Quindi se l’ennesimo figlio non è tra quelli abbinati dai selettori semplici, non viene corrisposto nulla.

:nth-of-type() opera su un livello di fratelli del tipo dato senza riguardo per altri selettori semplici. Quindi se l’ennesimo elemento che si verifica di quel tipo non è tra quelli abbinati dai selettori semplici, non viene trovato nulla.

È ansible utilizzare il combinatore di fratello generale:

 div, div.red ~ div.red ~ div.red { background: gray; } div.red ~ div.red { background: red; } 

È prolisso e devi reimpostare gli stili di nuovo, ma potrebbe essere utile in alcune situazioni speciali.

Potrebbe essere automatizzato con un preprocessore CSS e, se capisco correttamente gzip, poiché l’output CSS sta semplicemente ripetendo lo stesso testo, la dimensione del file gziped non dovrebbe essere eccessivamente grande a meno che non la si usi molto.

c’è una soluzione più semplice che ho trovato per lavorare con i miei div senza linee di codice speciali.

 .red:nth-child(6) {background-color:#ccc;} .red:nth-child(9) {background-color:#eee;} 

funziona bene anche senza il div in fronte.

 

… se vuoi divalificare div.beta per n-child, devi impostare almeno width = auto su div.alpha, probabilmente funziona.