Como o estado muda dinamicamente, quando um elemento atinge um estado específico, ele pode adquirir um estilo de pseudoclasse; quando o estado muda, ele perderá esse estilo; Pode-se perceber a partir disso que sua função é um tanto semelhante à da classe, mas é baseada na abstração fora do documento, por isso é chamada de pseudoclasse.
A pseudoclasse CSS é uma classe especial que funciona em seletores CSS para produzir efeitos específicos em tags ou elementos selecionados.
A sintaxe da pseudoclasse CSS é: seletor: nome da pseudoclasse {atributo: valor do atributo}
A pseudoclasse mais comumente usada é a pseudoclasse de hiperlink a. Os links são uma parte importante de um site. Você pode ver muitos links em quase todas as páginas da web. . apontar. Os links têm quatro estados diferentes, nomeadamente link, visitado, ativo e pairar. Você pode definir estilos diferentes para os quatro estados do link por meio dos seguintes seletores de pseudoclasse:
:link: Define o estilo dos links não visitados;
:visited: Define o estilo dos links visitados;
:hover: Define o estilo quando o mouse passa ou passa sobre o link;
:active: Define o estilo quando o link é clicado.
Exemplo:
<html><head></head><body><a>Não há tag href a, a fonte não é modificada e não há resposta quando o mouse é colocado sobre ela</a></br>< ahref=#target=_blank>href é A tag # é azul por padrão e sublinhada quando você coloca o mouse sobre ela, ela se transforma em uma mão</a></br><ahref=https://www. .dotcpp.com/target=_blank>href é a tag a do URL. O efeito é o mesmo acima</a></body></html>.
Resultados em execução:
(1):ligação
Descrição: Defina as propriedades da folha de estilo de um objeto antes de ele ser acessado.
Exemplo:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}</style></head><body><ahref=''>Primeiro link</a><ahref=''>Segundo link</a></body>< /html>Resultados em execução:
(2):visitado
Descrição: Define o atributo da folha de estilo de um objeto que está desatualizado quando seu endereço de link foi acessado.
Exemplo:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visitado{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>Primeiro link</a>< ahref= ''>Segundo link</a></body></html>Resultados em execução:
(3): passar o mouse
Descrição: Define as propriedades da folha de estilos de um objeto quando ele passa o mouse.
Exemplo:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visitado{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head> <body><ahref=''>Primeiro link</a><ahref=''>Segundo link</a></body></html>Resultados em execução:
(4):ativo
Descrição: Defina as propriedades da folha de estilos do objeto quando ele for ativado pelo usuário (um evento que ocorre entre o clique e a liberação do mouse).
Exemplo:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visitado{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000 ;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>Primeiro link</a><ahref=''>Segundo link</a>< /body>< /html>Resultados em execução:
Uma ordem diferente ao definir CSS levará diretamente a diferentes efeitos de exibição de link. O motivo pode ser o “princípio de proximidade” que os navegadores seguem ao interpretar CSS. Ordem correta: a:link, a:visited, a:hover, a:active.