Comentário: O HTML5 adicionou um novo seletor CSS e pseudo-categoria. Este artigo compilou alguns e deu uma introdução simples ao uso. Amigos que como HTML5 podem se referir a ele. Espero que seja útil para todos.
Seletorp [nome^= my] {font-size: 14px}
Seletor ^= regras são aplicadas a todas as tags <p> elemento com atributos de nome começando com meu
P [nome $ = meu] {font-size: 14px}
Seletor $ = regras se aplicam a todos os atributos de nome terminando com minhas tags <p> elemento
p [nome*= meu] {font-size: 14px}
Seletor $ = regras são aplicadas a todos os atributos de nome que contêm os elementos <p> terminando com o meu
Seletor>, +, ~
Seletor> significa que o elemento afetado é um filho do primeiro elemento.
Seletor + Este seletor refere -se ao elemento imediatamente após o elemento, e esses dois elementos devem ter o mesmo pai.
O seletor ~ é semelhante ao +, mas o elemento afetado não segue necessariamente o primeiro elemento.
Adicione o nome da pseudo-classe e o elemento de referência:
Exemplo: MyClass: Nth-Child (2)
O segundo elemento no elemento myclass
Palavra -chave ímpar, uniforme
MyClass: NTH-Child (ímpar): afeta a posição do índice de seu elemento pai com um número ímpar
myclass: nth-filho (par): afeta a posição do índice de seu elemento pai é uniforme
<estilo>
.Test: Nth-Child (ímpar)
{
Cor: azul;
}
.Test: Nth-Child (par)
{
Cor: vermelho;
}
.Test: Nth-Child (2)
{
Cor: verde;
}
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
Os efeitos são os seguintes:
1
2
1
2
1
2
Negar pseudo-classes
: não (p) {cor: vermelho}
Todos os outros elementos, exceto o elemento <p> são vermelhos