English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manuale completo delle scelte CSS
Specificare il colore di sfondo per ogni elemento p che corrisponde al secondo elemento同级兄弟 elementi dello stesso tipo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base (oldtoolbag.com)</title>
<style>
/* Paragrafo dispari */
p:nth-of-type(2n+1) {
color: red;
}
/* Paragrafo pari */
p:nth-of-type(2n) {
color: blue;
}
/* Primo paragrafo */
p:nth-of-type(1) {
font-weight: bold;
}
/* Secondo paragrafo */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div>Questo blocco non partecipa al conteggio.</div>
<p>Questo è il primo paragrafo.</p>
<p>Questo è il secondo paragrafo.</p>
<div>Questo blocco non partecipa al conteggio.</div>
<p>Questo è il terzo paragrafo.</p>
<p>Questo è il quarto paragrafo.</p>
</div>
</body>
</html>Prova a vedere ‹/›:nth-of-type( <nth> ) dove <nth> = <an-plus-b> | even | odd
Il selettore :nth-of-type(n) abilita il n-esimo elemento同级兄弟元素在同类型中.
n può essere un numero, una parola chiave o un'equazione.
Suggerimento: Vedere :nth-child() Selettore. Questo selettore abilita l'elemento genitore del n-esimo elemento figlio. :nth-child() .
I numeri nella tabella rappresentano la versione del browser che supporta la proprietà per la prima volta.
| Selettore | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
I numeri dispari e pari possono essere usati come parole chiave per abbinare i figli, il cui indice è dispari o pari (il primo figlio è considerato come l'indice 1).
Qui, abbiamo assegnato due colori di sfondo diversi per gli elementi p dispari e pari:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base (oldtoolbag.com)</title>
<style>
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>Questo è il primo paragrafo.</p>
<p>Questo è il secondo paragrafo.</p>
<p>Questo è il terzo paragrafo.</p>
<p>Questo è il quarto paragrafo.</p>
</div>
</body>
</html>Prova a vedere ‹/›Descrizione dell'equazione (an+ b): a rappresenta la dimensione del ciclo, N è un contatore (iniziando da 0), e b è l'offset.
Qui, abbiamo assegnato un colore di sfondo ai elementi p con un indice multiplo di 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guida di base (oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Il primo paragrafo.</p>
<p>Il secondo paragrafo.</p>
<p>Il terzo paragrafo.</p>
<p>Il quarto paragrafo.</p>
<p>Il quinto paragrafo.</p>
<p>Il sesto paragrafo.</p>
<p>Il settimo paragrafo.</p>
<p>Il第八个段落。</p>
<p>Il nono paragrafo.</p>
<p><b>Attenzione:</b> Internet Explorer 8 e le versioni precedenti non supportano il selettore :nth-last-child().</p>
</body>
</html>Prova a vedere ‹/›