Como trabalhar com Seletores do Estado em CSS3

Existem algumas situações em que o estado dinâmico de um objeto é importante para formatá-lo em CSS3. Usando seletores de estado pode ajudar um usuário a determinar quando os objetivos foram alcançados ou uma característica particular não está disponível (o objeto é desativado).

Por exemplo, um objeto pode ter um link associado com ele e quando o usuário clica nesse link, o estado do link alterações # 147 visitada. # 148- A lista a seguir fala sobre seletores de estado que os documentos comumente usados.

• :ligação: Seleciona todos os links não visitados em um documento.

  É prática comum para combinar seletores estaduais com seletores de tag. Por exemplo, você pode não querer formatar todos os links não visitados em um documento. O link para um tag seria mais provável ser formatado de forma diferente a partir do link para uma tag. Consequentemente, você normalmente vê seletores estatais como a: link onde a formatação afetaria todos os links de âncora não visitados.

• :visitado: Seleciona todos os links visitados em um documento.

• :ativo: Selecciona o link que o usuário tenha selecionado.

• :vazio: Seleciona um objeto que não tem conteúdo.

• :alvo: Seleciona o destino de um objeto. Por exemplo, quando o usuário clica em um link, o alvo desse link é selecionado.

• : Habilitado: Seleciona qualquer objeto que está habilitado.

• :Desativado: Seleciona qualquer objeto que está desativado.

• :verificado: Seleciona qualquer objeto que está marcada.

• ::seleção: Seleciona o conteúdo que o usuário tenha destacado de alguma forma.

selectores de estado tornam possível alterar a aparência do documento para coincidir com actividades que o utilizador realizou. O que isto significa é que o documento se torna mais interativo, sem a necessidade de qualquer codificação de sua parte. Este efeito é usado em uma série de exemplos que se seguem, então você vai ter muita prática trabalhando com seletores do estado. O procedimento a seguir mostra um método para trabalhar com seletores do estado.

1. Criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

2. Abrir ExternalCSS.HTML.

3. Digite o seguinte código após o existente

   marca no arquivo e salvar as alterações no disco.

   Selecione um
   Selecione Two
   Um
   Dois

   Isso, somado código fornece alguns indicadores de estado para o exemplo. Ao clicar em um link, o alvo do link que muda de estado.

4. Abrir ExternalCSS.CSS.

5. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   :: Selection {color: blueviolet-background-color: Plum -} :: - moz-selection {color: blueviolet-background-color: Plum -}: alvo {border: solid-border-width: medium-border-color: Red-background-color: BlanchedAlmond-}

   Observe o uso do prefácio -moz- especial para o selector de segunda :: seleção. Esta é uma das suas primeiras exposições a problemas de compatibilidade do navegador. A fim de fazer este trabalho selector com o Firefox, você deve adicionar esta segunda :: - selector moz-seleção com o prefácio.

6. Atualizar a página de teste.

7. Selecione alguns dos primeiros texto do parágrafo.

   A cor do texto e sua mudança de fundo.

8. Clique em Selecionar One.

   O parágrafo que contém uma muda sua aparência.

   

9. Clique em Selecionar Two.

   O parágrafo que contém dois muda sua aparência. O parágrafo contendo um retorna à sua aparência original.