Índice

Prefácio:

No artigo anterior, apresentamos alguns seletores comuns em detalhes. Nestes artigos, apresentaremos um seletor comum em CSS, o pseudo-seletor de classe. Existem muitos tipos dele. Espero que você possa entendê-lo melhor.

Pseudo seletor de classe:

Um seletor de pseudoclasse é uma maneira especial de selecionar elementos em CSS, especificado usando dois pontos (:) e um nome de pseudoclasse após o seletor. Os seletores de pseudoclasse podem selecionar elementos com um estado ou condição específica, não apenas com base em atributos estáticos, como nomes de tags ou nomes de classes.

Os seletores de pseudoclasse podem ser usados em conjunto com outros seletores para selecionar e aplicar estilos com mais precisão a diferentes elementos em um documento.

DICAS:
Pseudo-classes não são classes, são apenas um estado especial de elementos. Pseudo-classes são ferramentas poderosas e flexíveis em CSS. Elas nos permitem projetar estilos mais interativos e dinâmicos de acordo com diferentes estados e posições de elementos.

Seletores de pseudoclasse comuns:

1.:hover (estado de foco) Quando o mouse passa sobre o elemento, você pode definir um estilo específico para o elemento. Por exemplo, você pode alterar a cor ou a cor de fundo de um link quando o mouse estiver sobre ele:

   a:hover {
     color: red;
     background-color: yellow;
   }

2. :active (estado ativado):
Quando o elemento é ativado (por exemplo, clicado), um estilo específico pode ser aplicado. Essa pseudoclasse é normalmente usada em botões ou links para fornecer feedback de clique ao usuário:

 button:active {
     background-color: green;
     color: white;
   }

3. :focus (estado de foco):
Quando o elemento recebe o foco, um estilo específico pode ser aplicado. Usado principalmente em elementos de formulário para destacar o elemento atualmente em foco enquanto o usuário está digitando:

   input:focus {
     border: 2px solid blue;
   }

4. :visited (link visitado):
Selecione o link visitado e defina um estilo específico para ele. Isso geralmente é usado para alterar a cor dos links visitados para que os usuários possam distinguir quais links já foram clicados:

   a:visited {
     color: purple;
   }

5. :first-child (o primeiro elemento filho):
Selecione o primeiro elemento filho do elemento pai e defina o estilo para ele. Isso pode ser usado para selecionar o primeiro elemento em uma lista ou outras situações em que o primeiro elemento filho precisa ser destacado:

   li:first-child {
     font-weight: bold;
   }

6. :last-child (o último elemento filho):
Selecione o último elemento filho do elemento pai e defina um estilo para ele. Isso pode ser usado para selecionar o último elemento em uma lista ou outras situações em que o último elemento filho precisa ser destacado:

 li:last-child {
     margin-bottom: 0;
   }

7. :nth-child(n) (o enésimo elemento filho):
Selecione o elemento filho em uma posição específica no elemento pai e defina um estilo para ele. Você pode usar este seletor de pseudoclasse para aplicar estilos com base na posição dos elementos filho, onde n é um número que indica a posição:

    p:nth-child(2) {
     color: blue;
   }

O exemplo acima selecionará o segundo elemento `<p>` dentro do elemento pai e definirá sua cor de texto para azul.

Exemplo:

Por exemplo, se criamos uma tag a, todos sabemos que se a tag for acessada, ela ficará roxa, e quando não for acessada, ficará azul. Neste momento, se quisermos que a tag a fique vermelha quando não for acessada , ela ficará roxa normal quando for acessada . Não podemos fazer isso com o conhecimento que aprendemos antes!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

          a{
            color: red;
          }
        
  </style>
</head>
<body>

  <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
</body>
</html>

resultado:

Descobrimos que, independentemente de termos visitado este link, o texto "Go to Bilibili" é sempre vermelho, independentemente de o termos visitado ou não, o que não pode atingir os resultados que desejávamos antes, então introduzimos o conceito de seletores de pseudoclasse, usando seletores de pseudoclasse para selecionar elementos com estados ou condições específicas.

Pronúncia Correta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
        /* 选中的是没有访问过的A */
          a:link{
            color: red;
          }
        
  </style>
</head>
<body>

  <a href="https://www.bilibili.com/" target="_blank">去哔哩哔哩</a>
</body>
</html>

Antes de visitar:

Depois de visitar:

Pontas:

Quando nosso seletor de pseudo-classe modifica a tag a, geralmente temos uma ordem fixa, que é link->visited->hover->active

Isso ocorre porque essa ordem garante que as regras de estilo sejam aplicadas corretamente.

O seletor de pseudoclasse :link se aplica a links não visitados e especifica o estilo do link por padrão. Essa pseudoclasse geralmente é colocada primeiro, porque é o estado mais básico e o estilo padrão deve ser definido primeiro.
O seletor de pseudoclasse :visited se aplica a links que já foram visitados, o que especifica o estilo do link visitado. Segue `:link`, porque os dois pseudo-seletores são para diferentes estados do mesmo elemento.
O seletor de pseudo-classe :hover é aplicado ao estado quando o mouse está passando sobre o link, que especifica o estilo do link quando o mouse está passando. Ele vem primeiro porque o estado de foco às vezes é um estado importante para um usuário interagir com um link.
O seletor de pseudo-classe :active aplica-se ao estado quando o link é ativado (como mouse pressionado ou tecla pressionada), ele especifica o estilo do link quando ele é ativado. Geralmente vem por último porque representa o estado transitório do link e não é retido após a conclusão da interação do usuário.

Escrever regras de estilo nessa ordem garante que os estilos vinculados sejam aplicados conforme o esperado. Além disso, esta ordem também está em conformidade com os hábitos gerais de uso e as convenções do desenvolvedor, o que ajuda na legibilidade e manutenção do código.

Se você não modificar o estado de um tag nesta ordem, algumas modificações podem não aparecer normalmente.

Por exemplo:

Queremos que o rótulo a fique vermelho quando o mouse terminar e verde quando o mouse for clicado, portanto, devemos obedecer estritamente a esta ordem: coloque o hover na frente do ativo:

          a:hover{
            color: red;
          }
          
          a:active{
            color: darkgreen;
          }

Se a ordem for inversa, a guia não ficará verde quando estiver ativa.

Deve-se observar que nem todos os seletores de pseudoclasse devem ser organizados nessa ordem. Esta ordem é mais aplicável aos pseudo-seletores de tags `a`, pseudo-seletores para outros elementos podem ter diferentes convenções de ordenação.

Resumir:

Neste capítulo, apresentamos em detalhes o seletor de pseudoclasse, que nos permite modificar especificamente os diferentes estados do rótulo. É um seletor muito prático, mas ao mesmo tempo possui uma variedade de tipos, por isso precisamos nos lembrar mais.

Se meu conteúdo for útil para você, curta, comente e marque . A criação não é fácil, o apoio de todos é minha motivação para perseverar!

[Aprenda CSS do zero | Parte 2] Seletores de pseudoclasse