English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-Seletor child()+child(an1Início da ordenação, a seleção resultante é o pseudo-classe CSS:nth-child Expressão entre parênteses (an+b) A coleção de elementos correspondentes encontrados (n=0,1,2,3...). Exemplo:
0n+3 ou simplesmente 3 Combina o terceiro elemento.
1n+0 ou simplesmente n combinam todos os elementos. (Aviso de compatibilidade: No navegador Android 4.3 As versões a seguir n e 1n A maneira de combinação é diferente.1n e 1n+0 é consistente e pode ser escolhido a gosto.)
2n+0 ou simplesmente 2n Corresponde ao elemento na posição 2,4,6,8...do elemento (n=0,2n+0=0, o primeiro elemento não existe porque começa de1Início da ordenação). Você pode usar a palavra-chave even para substituir esta expressão.
2n+1 Corresponde ao elemento na posição 1,3,5,7...do elemento. Você pode usar a palavra-chave odd para substituir esta expressão.
3n+4 Corresponde ao elemento na posição 4,7,10,13...do elemento. ...
a e b devem ser inteiros, e o índice do primeiro elemento filho é 1Em outras palavras, este pseudo-classe combina todos os elementos cujos índices pertencem ao conjunto { an + b; n = 0, 1, 2, ...} dos elementos filhos. Além disso, deve-se notar especialmente que an deve ser escrito antes de b, não pode ser escrito como b+na forma an.
Manual completo de seletores CSS
Especifique o n-ésimo elemento pai correspondente a cada elemento p 2 Cor de fundo de um elemento filho:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>Este é o primeiro parágrafo.</p>
<p>Este é o segundo parágrafo.</p>
<p>Este é o terceiro parágrafo.</p>
<p>Este é o quarto parágrafo.</p>
<p><b>Atenção:</b> Internet Explorer 8 Navegadores de versões mais antigas não suportam :nth-seletor child().</p>
</body>
</html>Teste e veja ‹/›:nth-O seletor child(n) combina o n-ésimo elemento filho do pai, sem restrição de tipo de elemento.
n Pode ser um número, um nome de palavras-chave ou uma fórmula.
Aviso: Veja tambémseletorEste seletor combina o n-ésimo elemento irmão do mesmo tipo.
tr:nth-child(2n+1)
Representa as linhas ímpares de uma tabela HTML.
tr:nth-child(odd)
Representa as linhas ímpares de uma tabela HTML.
tr:nth-child(2n)
Representa as linhas pares de uma tabela HTML.
tr:nth-child(even)
Representa as linhas pares de uma tabela HTML.
span:nth-child(0n+1)
Representa o primeiro elemento filho que é span, equivalente a :first-O seletor child tem o mesmo efeito.
span:nth-child(1)
indica que o elemento span de primeiro filho do elemento pai foi selecionado
span:nth-child(-n+3)
Coincide com o elemento span dos três primeiros elementos filhos.
Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.
| seletor | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Ímpares e pares podem ser usados como palavras-chave para coincidir com elementos filhos, cujos índices são ímpares ou pares (o primeiro nó filho é1) Aqui, definimos duas cores de fundo diferentes para os elementos p ímpares e p pares:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>Este é o primeiro parágrafo.</p>
<p>Este é o segundo parágrafo.</p>
<p>Este é o terceiro parágrafo.</p>
<p>Este é o quarto parágrafo.</p>
<p><b>Atenção:</b> Internet Explorer 8 Navegadores de versões mais antigas não suportam :nth-seletor child().</p>
</body>
</html>Teste e veja ‹/›Usando a fórmula (an+ b) Descrição: a representa o tamanho de uma iteração, N é um contador (começando em 0), e b é o deslocamento. Aqui, definimos para todos os índices que são3do p elemento multiplicado por: especificou a cor de fundo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Guia básico(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>Este é o título</h1>
<p>primeiro parágrafo.</p>
<p>segundo parágrafo.</p>
<p>terceiro parágrafo.</p>
<p>quarto parágrafo.</p>
<p>quinto parágrafo.</p>
<p>sexto parágrafo.</p>
<p>setimo parágrafo.</p>
<p>oitavo parágrafo.</p>
<p>Nono parágrafo.</p>
<p><b>Atenção:</b> Internet Explorer 8 Navegadores de versões mais antigas não suportam :nth-seletor child().</p>
</body>
</html>Teste e veja ‹/›