English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素。注意: 这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数。
Manuale completo delle scelte CSS
指定table的tr背景色和字体效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di base (oldtoolbag.com)</title>
<style>
table {
border: 1px solid blue;
}
/* Seleziona gli ultimi tre elementi */
tr:nth-last-child(-n+3) {
background-color: pink;
}
/* Seleziona ogni elemento dal secondo all'ultimo */
tr:nth-last-child(n+2) {
color: blue;
}
/* Seleziona solo l'elemento al secondo dal fondo */
tr:nth-last-child(2) {
font-weight: 600;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Prima riga</td>
</tr>
<tr>
<td>Seconda riga</td>
</tr>
<tr>
<td>Terza riga</td>
</tr>
<tr>
<td>Quarta riga</td>
</tr>
<tr>
<td>Quinta riga</td>
</tr>
</tbody>
</table>
</body>
</html>Prova a vedere ‹/›Il selettore :nth-last-child(n) abbinisce ogni elemento che è il N-esimo figlio del suo elemento, indipendentemente dal tipo dell'elemento, contando dal figlio più recente.
nPuò essere un numero, una parola chiave o un'equazione.
Suggerimento: Vedere:nth-last-of-type() Selettore. Questo selettore abbinisce il n-esimo elemento strutturale più recente del genitore.
tr:nth-last-child(odd) o tr:nth-last-child(2n+1)
Rappresenta le righe dispari dell'HTML table: 1, 3, 5 ecc.
tr:nth-last-child(even) o tr:nth-last-child(2n)
Rappresenta le righe pari dell'HTML table: 2, 4, 6 ecc.
:nth-last-child(7)
Rappresenta l'elemento al contrario dal 7°.
:nth-last-child(5n)
Rappresenta gli elementi al contrario dal 5°, 10°, 15° e così via.
:nth-last-child(3n+4)
Rappresenta gli elementi al contrario dal 4°, 7°, 10°, 13° e così via.
:nth-last-child(-n+3)
Rappresenta gli ultimi tre elementi in un gruppo di nodi fratelli.
p:nth-last-child(n) o p:nth-last-child(n+1)
Rappresenta ogni elemento <p> in un gruppo di nodi fratelli. È uguale a un semplice selettore p. (Poiché n inizia da 0, mentre l'elemento ultimo inizia da 1, sia n che n+1 selezionano lo stesso elemento.)
p:nth-last-child(1) o p:nth-last-child(0n+1)
Rappresenta tutti gli elementi in posizione ultima tra i nodi fratelli<p>。È uguale al selettore :last-child.
I numeri nella tabella rappresentano la versione del browser che supporta la proprietà per la prima volta.
| Selettore | |||||
|---|---|---|---|---|---|
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Dispari e pari possono essere utilizzati come parole chiave per abbinare i figli, l'indice dei quali è dispari o pari.
Qui, abbiamo assegnato due colori di sfondo diversi agli elementi p con un indice dispari e pari in ordine inverso:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di base (oldtoolbag.com)</title>
<style>
p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<p>Il primo paragrafo.</p>
<p>Il secondo paragrafo.</p>
<p>Il terzo paragrafo.</p>
<p><b>Attenzione:</b> Internet Explorer 8 e le versioni precedenti non supportano lo selettore :nth-last-child().</p>
</body>
</html>Prova a vedere ‹/›Descrizione dell'equazione (an+ b): a rappresenta la dimensione del ciclo, N è un contatore (partendo da 0), e b è il offset.
Qui, abbiamo assegnato un colore di sfondo agli elementi p con un indice che è un multiplo di 3 in ordine inverso:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di base (oldtoolbag.com)</title>
<style>
p:nth-last-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Questo è il 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 lo selettore :nth-last-child().</p>
</body>
</html>Prova a vedere ‹/›