Come funziona: nth-child (n + 4): nth-child (-n + 8) seleziona un intervallo di elementi?

Question

Secondo http://nthmaster.com/, quando lo styling una serie di elementi di nth-child, dobbiamo farlo:

:nth-child(n+4):nth-child(-n+8) 

Se solo uno :nth-child() che usiamo, allora vediamo che stili di tutti gli elementi di quella formula.

In che modo ciascuno di questi due selettori :nth-child() annulla l'influenza dell'altro su elementi che non rientrano nell'intervallo?

Answer 1

La combinazione di selettori semplici in questo modo significa semplicemente che stai cercando elementi che soddisfino contemporaneamente tutte le condizioni date. La combinazione di pseudo-classi non è diversa dalla combinazione di altri tipi di selettore semplice, ad esempio div.example o input[type="checkbox"]:checked.

Così :nth-child(n+4):nth-child(-n+8) appena si intende qualsiasi elemento che è sia:nth-child(n+4) e :nth-child(-n+8). Questo può essere solo un sottoinsieme delle corrispondenze di entrambi i selettori se usato da solo.

Ed è così che ottieni una serie di elementi.

Come si fa a sapere quali elementi saranno abbinati? Semplice: guardare la B in ogni Un'espressione + B:

• :nth-child(n+4) partite i bambini a partire dal 4 ° (compreso)
• :nth-child(-n+8) partite i bambini fino al 8 °

come tutto questo le opere sono già illustrate nel sito Web a cui ci si collega, ma gli esempi precedenti utilizzano :nth-child(n+6) e :nth-child(-n+9) separatamente, il che potrebbe creare un po 'di confusione. Ecco un esempio più coerente per illustrare come i due selettori si combinano (ignorano i bit ::before/::after/content nel CSS - basta concentrarsi sull'uscita):

li::before { 
 
    content: 'li'; 
 
} 
 

 
li:nth-child(n+4)::before { 
 
    content: 'li:nth-child(n+4)'; 
 
} 
 

 
li:nth-child(-n+8)::after { 
 
    content: ':nth-child(-n+8)'; 
 
}

<ol> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>