CSS3: nth-child () Selettore
selettori CSS manuale di riferimento completo
Esempi
Specificare ogni elemento p corrisponde al colore dell'elemento genitore del secondo sub-elemento di sfondo:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
Prova »
Definizione e utilizzo
: Nth-child (n) Selettore corrispondenza elemento principale n esimo elemento.
npuò essere un numero, una parola chiave o una formula.
Suggerimento: Vedere selettore .Il selettore seleziona lo stesso tipo di fratelli sibling n-esimo.
Supporto per il browser
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Altri esempi
esempio 1
<P pari e dispari può essere utilizzato come parola chiave per abbinare il sottoelemento viene utilizzato, il suo indice è pari o dispari (l'indice del primo figlio è 1). Qui, specifichiamo due diversi colori di sfondo per gli elementi pari e dispari P:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
Prova »
esempio 2
Utilizzando la formula (an + b) Descrizione: La dimensione di un rappresentante di un ciclo, N è un contatore (a partire da 0), e B è l'offset. Qui abbiamo tutti gli indici sono multipli di tre elementi p specifica il colore di sfondo:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
Prova »