Seletor CSS

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Nesta página:

Existem várias áreas da aplicação axe Auditor que fornecem um campo de Seletor . Siga este processo quando quiser especificar um seletor CSS particular para ser testado como parte do seguinte:

  • Componente Comum (Novo Caso de Teste > Adicionar Componente): Ao definir um componente comum no painel de Componentes Comuns ao criar um novo Caso de Teste.
  • Componente de Área de Página (Novo Caso de Teste > Adicionar Página > Escopo da Área de Página): Ao definir uma Área de Página no painel de Adicionar Páginas ao criar um novo Caso de Teste.
  • Componente de Área de Página (Preparar Página para Testes Automatizados e Manuais > Escopo da Área de Página): Ao definir uma Área de Página da "página em teste" na tela Preparar Página para Testes Automatizados e Manuais acessada a partir da Visão Geral da Execução de Teste.

Introdução

Localizar e copiar um seletor normalmente envolve o uso das "ferramentas de desenvolvedor" que acompanham seu navegador da web. Estas têm nomes diferentes dependendo do tipo de navegador, e cada uma oferece atalhos de teclado para acessar as ferramentas e navegar dentro delas.

Referência de Atalhos de Teclado por Tipo de Navegador

Em um Mac: Geralmente, a tecla Cmd (⌘) pode ser substituída por [Ctrl] em um dispositivo OSX ou iOS.

Abrindo as Ferramentas de Desenvolvedor (Exemplo do Firefox)

O exemplo que se segue mostra o uso das Ferramentas de Desenvolvedor do Mozilla Firefox. Para mais informações sobre o uso de atalhos de teclado com as Ferramentas de Desenvolvedor do Firefox, veja Atalhos de Teclado do Desenvolvedor Mozilla.

Você pode abrir o Inspetor (uma das Ferramentas de Desenvolvedor que lança todas elas) de uma das seguintes maneiras:

  • Sem um elemento selecionado: Escolha a **Inspetor** opção do **Desenvolvedor** menu **(Ctrl+Shift+I)**, ou na Barra de Menus do Firefox, selecione **Ferramentas > Desenvolvedor Web > Inspetor (Ctrl+Shift+C)**.
  • Com o elemento selecionado*: **Clique com o botão direito** em um elemento de uma página da web e selecione **Inspecionar Elemento [(Q)]{.kbd}**.

Copiar um Seletor de uma página

  1. Right-click na região desejada da página de teste, então selecione Inspect Element no menu para iniciar o Inspetor para que você possa então selecionar um elemento na página (ou use o atalho de teclado Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Copie o seletor CSS que você deseja direcionar. Por exemplo, ao usar as Ferramentas de Desenvolvedor do Firefox, você pode right-click > Copy Unique Selector para o elemento atualmente selecionado na ferramenta Inspector. Certifique-se de colar a referência completa do elemento devidamente formatada (por exemplo, para testar o id elemento de atributo para o valor 'main', você especificaria #main como o seletor).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Para obter detalhes completos sobre seletores CSS devidamente formatados e referência completa de elementos, consulte documentação Mozilla Developer Web CSS Selector ou Recomendação W3C Selectors Level 3.

    • Selector: #id → O #id seletor estiliza o elemento com o id especificado.
    • Example: #main → O id especificado é main.
    • Example Reference: Seleciona o elemento com id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Cole o seletor que você copiou da área de transferência virtual no Selector campo.
    Quando você acessar os problemas resultantes encontrados para o componente ou área da página direcionada, verá incluídos aqueles relacionados ao seletor CSS específico que você inseriu.
  4. Bug conhecido: Quando usa o Seletor CSS no navegador Chrome. Clique com o botão direito em Inspecionar, Abra as ferramentas de desenvolvimento, na aba elementos, encontre o seletor css para clicar no alvo e elemento>copiar>xpath ou elemento>copiar>xpath completo sempre retorna este erro,\ ' Ocorreu um erro desconhecido. Se este caso de teste contiver quaisquer componentes ou áreas de página, certifique-se de que todos os seletores sejam válidos'
    Workaround: Encontre o ID para o Seletor CSS e use Copy > Copy Selector.

O que são Seletores?

**Resposta Rápida**: São sequências de texto que podem ser usadas para identificar um elemento ou grupo de elementos em uma página da web.

**Resposta Um Pouco Mais Longa e Técnica**: Seletors são padrões que correspondem a elementos em uma estrutura de árvore e podem ser usados para testar fragmentos específicos ou selecionar nós dentro de documentos HTML ou XML. A linguagem Cascading Style Sheet (CSS3) descreve a renderização de documentos HTML na tela ou em fala, e usa seletores para vincular propriedades de estilo a elementos em documentos HTML.

**Uso**: Ao avaliar a expressão em todos os elementos em uma subárvore, os seletores podem ser usados para:

  • Selecionar um conjunto de elementos
  • Selecionar um único elemento de um conjunto de elementos

**Estrutura**: Um seletor representa uma estrutura que pode ser usada como uma condição (como em uma regra CSS) que determina quais elementos um seletor corresponde em uma árvore de documentos, ou como uma descrição plana do fragmento HTML ou XML correspondente a essa estrutura.

Tipos: Os tipos de seletor incluem:

  • Universal: O nome qualificado de qualquer tipo de elemento (*) Por exemplo, para especificar o nome qualificado de qualquer elemento em inglês na árvore de documentos para qualquer namespace, insira:

    *[hreflang|=en]

  • Tipo: Um prefixo de componente de namespace opcional adicionado ao nome de um elemento (|) Por exemplo, para representar um elemento de cabeçalho 2 na árvore de documentos, simplesmente insira:

    h2

  • Atributo: Representa um atributo de elemento ([]) Por exemplo, para representar um elemento h3 que carrega o atributo title, qualquer que seja seu valor, insira:

    h3[title]

  • Classe: Notação de ponto final ou "full stop" para representar o atributo de classe para o respectivo namespace (.) Por exemplo, para aplicar informações de estilo de cor verde a todos os elementos com class="example", insira:

    .example { color: green } / todos os elementos com class=example */

  • ID: Atributos declarados como tipo ID identificam exclusivamente um elemento com um sinal de número (#) Por exemplo, para representar um seletor de ID em que qualquer elemento cujo valor do atributo de tipo ID seja "12345", insira:

    #12345

  • Pseudo-classes: Seleção de informações fora da árvore do documento que não pode ser expressa com seletores simples (:) Por exemplo, para especificar um seletor que representa links com a classe external e já visitados, insira:

    a.external:visited

  • Pseudo-elementos: Dois pontos seguidos pelo nome de um pseudo-elemento permitem o acesso ao conteúdo além da árvore de documentos atual, e apenas um por seletor é permitido (::)

    Por exemplo, para mudar as letras da primeira linha de cada elemento p para maiúsculas, insira:

    p::first-line { text-transform: uppercase }

  • Combinadores: Permitem a especificação de um caminho hierárquico para mostrar a ancestralidade, como elementos filhos ou irmãos ( ) ou (+)

    Por exemplo, para direcionar elementos em que são descendentes de elementos h1, insira:

    h1 em.

    É uma descrição correta e válida, mas parcial, do seguinte fragmento:

    <h1>Este <span class="myclass"> manchete é <em>muito>/em> importante</span></h1>

**Sintaxe**: A "gramática" básica dos seletores inclui o seguinte:

  • **: 0 ou mais (Nota: Como isso pode ser omitido quando implícito, não é usado com frequência.)
  • **+**: 1 ou mais
  • **?**: 0 ou 1
  • **|**: separa alternativas
  • **[ ]**: agrupamento

**Referência Abrangente**: Para mais informações, consulte o World Wide Web Consortium (W3C) - Seletores Nível 3: https://drafts.csswg.org/selectors-3/

Tópicos Relacionados:

Is this page helpful?

Help us improve this page

Still need help?