CSS pseudo-classes
CSS seletores pseudo-classe são usados para adicionar alguns efeitos especiais.
gramática
sintaxe Pseudo-classe:
classes CSS também pode usar pseudo-classe:
pseudo classes de ancoragem
suporte CSS em navegadores, diferente estado do link pode ser exibido de maneiras diferentes
Exemplos
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
tente »
Nota: CSS definição, uma: foco deve ser colocado em um: ligação e um: após visitada, é eficaz.
Nota: CSS definição, uma: activo deve ser colocado em um: pairar depois, para ser eficaz.
Nota: O nome dapseudo-classe não é sensível a maiúsculas.
Pseudo-classes e classes CSS
Pseudo-classes pode ser usado em conjunto com classes CSS:
<a class="red" href="css-syntax.html"> CSS Sintaxe </a>
Se o link acima exemplo foi visto, ele será exibido em vermelho.
CSS -: em primeiro lugar - pseudo-classe filha
Você pode usar o: primeiro-criança pseudo-classe seleciona o primeiro elemento filho
Nota: Você deve ser declarado na versão anterior do IE8 <! DOCTYPE> , assim: primeiro-criança tenha efeito.
Combinar o primeiro elemento <p>
No exemplo a seguir, o seletor associa o elemento <p> como o primeiro filho de qualquer elemento elementos:
Exemplos
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
tente »
Combinar todos os elementos <p> no primeiro <i> elemento
O primeiro <i> elemento no exemplo a seguir, o selector corresponde a qualquer elemento <p>:
Exemplos
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
tente »
<H2 Jogo todos como o primeiro elemento filho do elemento <p> em todos os <i> elementos:
Exemplos
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
tente »
CSS -: lang pseudo-classe
: Lang pseudo-classe permite que você tenha a capacidade para diferentes idiomas definir regras especiais
Nota: IE8 deve declarar o <! DOCTYPE> Para suportar; lang pseudo-classe.
No exemplo a seguir ,: valor do atributo lang tipo de classe de q há definições de elementos citações:
Exemplos
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
tente »
mais exemplos
Adicionar estilos diferentes para hiperlinks
Este exemplo demonstra como adicionar outros estilos de hiperlinks.
Use: o foco
Este exemplo demonstra como usar a: concentrar pseudo-classe.
Todos CSS pseudo-classes / elementos
| seletor | exemplo | shows de exemplo |
|---|---|---|
| : verificada | input:checked | Todos elemento de formulário selecionado |
| : desativado | input:disabled | Selecione todos os elementos de formulário com deficiência |
| : empty | p:empty | Selecione todos os elementos p não tem filhos |
| : ativado | input:enabled | Selecione todos os elementos de formulário habilitados |
| : First-of-type | p:first-of-type | Selecione cada elemento pai é o primeiro elemento filho elementos p p |
| : In-gama | input:in-range | Selecione os valores de elementos dentro de um intervalo especificado |
| : inválido | input:invalid | Selecione todos os elementos inválidos |
| : Last-child | p:last-child | Selecione todos os elementos p no último elemento filho |
| : Last-of-type | p:last-of-type | Selecione cada elemento p é o último elemento de um elemento pai p |
| : Não (selector) | :not(p) | Selecione todas as outras do que o p elementos |
| : Nth-child (n) | p:nth-child(2) | Selecione todos os elementos p no segundo sub-elemento |
| : Nth-last-child (n ) | p:nth-last-child(2) | Selecione todos os elementos da inversa de p segundo elemento filho |
| : Nth-last-of-type (n) | p:nth-last-of-type(2) | Seleccionar todos os elementos P é o recíproco da segunda sub-elemento P |
| : Nth-of-type (n ) | p:nth-of-type(2) | Selecione todos os elementos p no segundo sub-elemento para o p |
| : Only-of-type | p:only-of-type | Selecionar tudo apenas um elemento filho de p elementos |
| : Only-child | p:only-child | Selecionar tudo apenas um elemento filho de p elementos |
| : opcional | input:optional | Escolha não atributo "necessária" do elemento |
| : Out-of-range | input:out-of-range | Selecionar elemento de atributo fora do intervalo especificado de valores |
| : Somente leitura | input:read-only | Selecione o atributo somente leitura dos atributos do elemento |
| : Leitura e escrita | input:read-write | Escolha não só de leitura atributo das propriedades do elemento |
| : necessário | input:required | Escolha "necessária" atributo especifica as propriedades do elemento |
| : root | root | Selecione o elemento raiz do documento |
| : target | #news:target | Escolha elemento da atividade atual #news (clique em uma URL que contém o nome da âncora) |
| : válido | input:valid | Selecione todos os valores válidos para propriedades |
| : Link | a:link | Selecione todos os links não visitados |
| : visited | a:visited | Selecione todos os links visitados |
| : ativa | a:active | Select é um link ativo |
| : hover | a:hover | Coloque o mouse sobre o status do link |
| : foco | input:focus | Depois de selecionar o elemento de entrada tem o foco |
| : First-letter | p:first-letter | Selecione a primeira letra de cada elemento <p> |
| : Primeira linha | p:first-line | Selecione a primeira linha de cada elemento <p> |
| : Primeiro-criança | p:first-child | <] P> selector elemento corresponde a qualquer elemento pertencente ao primeiro elemento filho |
| : antes | p:before | Inserir conteúdo antes de cada elemento <p> |
| : depois | p:after | Inserir conteúdo depois de cada elemento <p> |
| : Lang (idioma) | p:lang(it) | seleção de atributos lang <p> elemento para um valor inicial |