Perché il selettore nth-child seleziona questi elementi?

Ho questo codice:Perché il selettore nth-child seleziona questi elementi?

<html> 
    <head> 
     <style type="text/css"> 
      * > ul li:nth-child(4n+3) { color: red; } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li id="A" class="u">1</li> 
      <li> 
       <ol> 
        <li id="B" class="u">2.1</li> 
        <li id="C" class="g">2.2</li> 
        <li id="D" class="u">2.3</li> 
        <li id="E" class="g">2.4</li> 
       </ol> 
      </li> 
      <li id="F" class="u">3</li> 
     </ul> 
    </body> 
</html>

In questo seleziona 2.3 e 3, ma non capisco come questo accade.

Il mio pensiero è: Seleziona simultaneamente due elementi in posizione dispari rispetto all'elemento genitore. Ma è la 2.3 davvero la 3a posizione o 7? Sono davvero bloccato, per favore aiuto.

JSFiddle Sample

fonte

2013-07-29 Raed K Hakim

Ignorando il ''> 'ridondante, il tuo selettore significa:" seleziona ogni 'li' che è il' 4n + 3' figlio del suo elemento padre ed è il discendente di un elemento 'ul'". Non esiste qualcosa come "l'elemento genitore" con il selettore nth-child. Ogni elemento della pagina viene controllato per vedere se è l'ennesimo parente di * suo * elemento genitore. –

* > ul li:nth-child(4n+3)

In primo luogo, il * > all'inizio di questo selettore è del tutto superfluo (Si dice al browser di cercare un ul che è un figlio di qualcos'altro;. Quant'altro, naturalmente, tutti Gli elementi ul sono, se non altro, saranno all'interno del tag body).

Quindi è possibile rimuovere quello. Renderà più semplice lavorare e più facile da spiegare.

Ora siamo lasciati con questo:

ul li:nth-child(4n+3)

Il motivo è la raccolta sia 2.3 e 3 è perché entrambe le serie di li elementi discendono dal singolo elemento padre ul. L'utilizzo di uno spazio tra i selettori indica al browser di cercare discendenti corrispondenti a; non si preoccupa di quanto in fondo alla struttura cercare gli elementi corrispondenti a li, quindi trova entrambi i set.

Per rispondere alla tua domanda sul motivo per cui 2.3 non è visto come settimo elemento nel set, la risposta è che CSS vede ogni set di elementi li come un gruppo completamente separato; anche se il selettore dovesse corrispondere a due o più serie di elementi come ha fatto il selettore originale, verrà comunque eseguito un contatore separato per ciascuna, quindi 2.3 e 3 sono entrambi visti come il terzo elemento nei rispettivi insiemi.

Se si desidera selezionare solo gli elementi che sono bambini del ul (cioè immediatamente sotto di essa nella gerarchia), è necessario utilizzare il selettore bambino (>) piuttosto che solo uno spazio.

ul > li:nth-child(4n+3)

questo sarà ora possibile selezionare solo il set esterno della li elementi, in modo che solo il vostro elemento 3 sarà raccolto.

La speranza aiuta a spiegare le cose.

Tra l'altro, su un piano più generale, si potrebbe trovare questo utile: CSS '>' selector; what is it?

fonte

2013-07-29 11:51:26 Spudley

E 'fatto relativo al genitore:

#B = indice 0

#C = indice 1

#D = indice 2

#E = indice 3

4n mezzi 4 moltiplicata per l'indice della voce

+ 3 è, naturalmente, più 3 - significato:

#B = indice 0 = 4x0 = 0 + 3 = 3 (3 ° elemento - indice 2)

#C = indice 1 = 4x1 = 4 + 3 = 7 (7 elemento - indice 6)

#D = indice 2 = 4x2 = 8 + 3 = 11 (11 dell'elemento - indice 10)

#E = indice 3 = 4x3 = 12 + 3 = 15 (15 ° elemento - indice 14)

fonte

2013-07-29 11:54:21 SmokeyPHP

"4n significa 4 moltiplicato per l'indice dell'oggetto" Non sono sicuro di questa parte. Significa ogni quarto elemento. –

@Ancora la stessa cosa, ma la mia spiegazione è più facile da visualizzare e calcolare con (personalmente) – SmokeyPHP

In realtà è, mai pensato in questo modo. Grazie per una prospettiva diversa. –

L'articolo 2.3 è la posizione 3 (n = 0, 4n + 3 = 3) nell'elenco più interno di ol. È inoltre selezionato perché la parte ul li dei selettori significa "tutti gli elementili all'interno di qualsiasi elemento ul, indipendentemente dal livello di nidificazione". E la parte nth-child aggiunge un'altra condizione: "quelli di loro che sono 3, 7, 11 e così via figlio di loro padre immediato".

fonte

2013-07-29 12:16:18

Perché il selettore nth-child seleziona questi elementi?

risposta

Problemi correlati