English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manual completo de seletores CSS
Especificar o <nth> elemento correspondente de cada p elemento do mesmo tipo2Cor de fundo de elementos irmãos de mesmo nível:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
/* Parágrafos ímpares */
p:nth-of-type(2n+1) {
color: red;
}
/* Parágrafos pares */
p:nth-of-type(2n) {
color: blue;
}
/* Primeiro parágrafo */
p:nth-of-type(1) {
font-weight: bold;
}
/* Segundo parágrafo */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div> Este não participa da contagem.</div>
<p>Este é o primeiro parágrafo.</p>
<p>Este é o segundo parágrafo.</p>
<div> Este não participa da contagem.</div>
<p>Este é o terceiro parágrafo。</p>
<p>Este é o quarto parágrafo。</p>
</div>
</body>
</html>Teste e veja ‹/›:nth-of-type( <nth> ) onde <nth> = <an-plus-b> | even | odd
:nth-of-seletor type(n) coincide com o n-ésimo elemento irmão de mesmo tipo.
n pode ser um número, uma palavra-chave ou uma fórmula.
Dica: Veja também :nth-child() seletor. Este seletor coincide com o n-ésimo elemento filho do elemento pai. Veja o :nth-child() 。
Os números na tabela representam a primeira versão do navegador que suporta essa propriedade.
| seletor | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Ímpares e pares podem ser usados como palavras-chave para coincidir elementos filhos, cujo índice é ímpar ou par (o primeiro nó filho é1)
Aqui, especificamos duas cores de fundo diferentes para elementos p ímpares e pares:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>Teste e veja ‹/›Usando a fórmula (an+ b）.Descrição: a representa o tamanho de um loop, N é um contador (começando em 0), e b é o deslocamento.
Aqui, especificamos cores de fundo para todos os índices3multiplos elementos p especificam a cor de fundo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</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>cincoavo parágrafo。</p>
<p>seisavo parágrafo。</p>
<p>seteavo parágrafo。</p>
<p>oitavo parágrafo。</p>
<p>Nono parágrafo。</p>
<p><b>Atenção:</b> Internet Explorer 8 e versões mais antigas de navegadores não suportam :nth-último-seletor child().</p>
</body>
</html>Teste e veja ‹/›