Pode-se dizer que o papel dos seletores de pseudoclasse no CSS é crucial. Se o CSS não tiver seletores de pseudoclasse, muitos efeitos devem ser concluídos com a ajuda de js. é difícil de manter. Uma carga de trabalho tão pesada para os programadores também vai contra o propósito do CSS, que é melhorar a eficiência do desenvolvimento e completar o desenvolvimento de maior qualidade no mesmo mundo.
Os seletores de pseudoclasse incluem seletores de objeto de pseudoclasse e de pseudoclasse. Os seletores de pseudoclasse usam dois pontos (:) como um identificador de prefixo. Você pode adicionar um seletor antes dos dois pontos para limitar o escopo do aplicativo da pseudoclasse. Após os dois pontos estão os nomes dos objetos da pseudoclasse e da pseudoclasse. Não há espaços antes e depois dos dois pontos, caso contrário, será considerado um. seletor de classe, conforme mostrado na figura.
A tabela a seguir contém a maioria dos seletores de pseudoclasse:
Pseudoclasse dinâmica
Pseudoclasses dinâmicas são um tipo de estilos comportamentais. Esses estilos não existem em HTML e só podem ser refletidos quando os usuários interagem com a página. Os seletores de pseudoclasse dinâmicos incluem duas formas:
Pseudoclasse âncora, que é o estilo mais comum em links, como :link, :visited.
As pseudoclasses de comportamento também são chamadas de pseudoclasses de operação do usuário, como :hover, :active e :focus.
Por uma questão de simplicidade no ensino, escrevo como inline. Em aplicações reais, não é recomendado usar inline.
:link
Defina o estilo do hiperlink antes de pular. O uso é o seguinte:
<ahref=#target=_blank>Pular</a>
Se quiser definir o estilo antes do hiperlink acima para ter uma cor de fonte vermelha e sem sublinhado, você pode defini-lo assim.
:visitado
Essa pseudoclasse é exatamente o oposto de :link. :link é o estilo antes do link e :visited é o estilo depois do link, ou seja, o estilo do hiperlink após ser visitado.
<ahref=#target=_blank>Pular</a>:li
Na aprendizagem diária, todos podem escrever os links antes e depois deles juntos, o que é conveniente, rápido e semântico, o que faz com que muitos alunos não saibam que essas duas pseudo-aulas têm um efeito de cobertura; Os exemplos a seguir podem ajudá-lo a ter uma compreensão geral:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>Pular</a></body></html>O código acima é o link de salto da página HTML para a página de login. A renderização após a execução é a seguinte:
: pairar
O seletor de pseudoclasse :hover é usado para efeitos de estilo quando o usuário move o mouse sobre o elemento. Ele não é usado apenas para hiperlinks, mas também pode ser aplicado a muitos elementos, como botões. Ao passar o mouse sobre ele, você descobrirá que a cor de fundo norte do botão fica mais escura ou muda de cor. claro que existem outras formas de configurar, mas não há dúvidas: pairar é a forma mais simples e rápida. Aqui, primeiro apresentarei as técnicas para usar hiperlinks e, em seguida, expandirei e usarei elas para alterar o efeito após o mouse passar sobre o elemento.
Se você deseja que o elemento mude de cor quando o mouse passa sobre um elemento de tag, o código é o seguinte:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>Pular</a></body></html> 
Expandir
O código da estrutura é o seguinte:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{largura:100px;altura:50px;altura da linha:50px;cor:vermelho;fundo:laranja ;text-align:center;}</style></head><body><div>:hover</div></body></html>Quando o efeito desejado é que ao passar o mouse sobre o elemento div, a cor de fundo seja alterada para preto e a fonte seja alterada para branco O código é o seguinte:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{largura:100px;altura:50px;altura da linha:50px;cor:vermelho;fundo:o range;text-align:center;transition:all1s;}div:hover{background:black;color:white;}</style></head><body><div>:hover</div></body> </html>:ativo
:active é usado para efeitos de estilo quando o usuário clica em um elemento. É usado principalmente em controles de formulário. Quando o usuário clica, tem o efeito de pressionar um botão. Pelo mesmo motivo, coloquei isso na área de extensão.
Quando um hiperlink é clicado, desejo alterar a cor da fonte do hiperlink. O código de implementação é o seguinte:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>Pular</a></body></html>Expandir
Este exemplo usa um div para imitar um botão. O estilo do botão que vem com HTML é difícil de descrever em uma palavra. É fácil imitar e controlar o estilo.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :verde;tamanho da fonte:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head><body><div> botão</div></body></html>:foco
:focus é usado para estilizar o efeito quando um elemento multifuncional se torna foco. Isso é frequentemente usado em elementos de controle de formulário.
Código da estrutura:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ corpo></html>
Quando você deseja que a entrada ganhe foco, a cor de fundo é #CCC e o código de implementação é:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>Você pode ver o efeito de estilo ao alterar a cor de fundo para a cor de destino depois que a entrada recebe o foco.
Coisas a serem observadas:
(1) O seletor de pseudoclasse acima segue o princípio da ordem, ou seja, link para o visitado para passar o mouse e depois para a pseudoclasse ativa.
(2) Hover e ativo estão incluídos na pseudocategoria de comportamento do usuário.
primeiro filho
A pseudoclasse first-child pode corresponder ao primeiro elemento filho no elemento pai especificado. Por exemplo, ul li:first-child pode corresponder ao primeiro elemento <li> no elemento <ul>.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Corresponda a primeira tag <li>em <ul>*/color:red;}</style></head>< body> <ul><li>programação dotcpp</li><li>programação dotcpp</li><li>programação dotcpp</li></ul></body></html>Resultados em execução:
ast-criança
Semelhante ao first-child, a pseudoclasse last-child pode corresponder ao último elemento filho no elemento pai especificado. Por exemplo, ul li:last-child pode corresponder ao último elemento <li> no elemento <ul>. o código de exemplo é o seguinte:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Corresponda a última tag <li>em <ul>*/color:red;}</style></head><body > <ul><li>programação dotcpp</li><li>programação dotcpp</li><li>programação dotcpp</li></ul></body></html>Resultados em execução:
n-ésimo filho
A pseudoclasse nth-child é nova em CSS3. Ela pode corresponder ao enésimo elemento filho no elemento especificado. Por exemplo, ul li:nth-child(2) pode corresponder ao segundo elemento <li> no elemento <ul>. O código de exemplo é o seguinte:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Corresponda a segunda tag <li>em <ul>*/color:red;}</style></ head> <body><ul><li>programação dotcpp</li><li>programação dotcpp</li><li>programação dotcpp</li></ul></body></html>Resultados em execução:
