CSS3: nth-child () selector
seletores CSS manual de referência completo
Exemplos
Especifique cada elemento p coincide com a cor do elemento pai do segundo sub-elemento de fundo:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
tente »
Definição e Uso
: Nth-child (n) selector correspondente elemento pai n th elemento.
npode ser um número, uma palavra-chave, ou uma fórmula.
Dica: Veja selector .O selector corresponde ao mesmo tipo dos irmãos irmãos n-th.
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
mais exemplos
exemplo 1
<P pares e ímpares pode ser utilizada como uma palavra-chave para coincidir com o sub-elemento é utilizado, o seu índice é par ou ímpar (o índice do primeiro filho é 1). Aqui, especificamos duas cores diferentes de fundo para os elementos pares e ímpares p:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
tente »
exemplo 2
Usando a fórmula (a + b) Descrição: O tamanho de um representante de um ciclo, N é um contador (a partir de 0), e b é o deslocamento. Aqui nós todos os índices são múltiplos de três elementos p especifica a cor de fundo:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
tente »