2015-09-22 6 views

risposta

3

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>