Se puede decir que el papel de los selectores de pseudoclases en CSS es crucial. Si CSS no tiene selectores de pseudoclases, muchos efectos deben completarse con la ayuda de js. Esto no solo aumentará la cantidad de código, sino que también lo hará. es difícil de mantener. Una carga de trabajo tan pesada para los programadores también va en contra del propósito de CSS, que es mejorar la eficiencia del desarrollo y completar un desarrollo de mayor calidad en el mismo mundo.
Los selectores de pseudoclase incluyen selectores de objetos de pseudoclase y pseudoclase. Los selectores de pseudoclase utilizan dos puntos (:) como identificador de prefijo. Puede agregar un selector antes de los dos puntos para limitar el alcance de la aplicación de pseudoclase. Después de los dos puntos están los nombres de los objetos de pseudoclase y pseudoclase. No hay espacios antes y después de los dos puntos; selector de clase, como se muestra en la figura.
La siguiente tabla contiene la mayoría de los selectores de pseudoclases:
Pseudoclase dinámica
Las pseudoclases dinámicas son un tipo de estilos de comportamiento. Estos estilos no existen en HTML y solo pueden reflejarse cuando los usuarios interactúan con la página. Los selectores dinámicos de pseudoclase de pseudoclase incluyen dos formas:
Pseudoclase de anclaje, que es el estilo más común en enlaces, como :link, :visited.
Las pseudoclases de comportamiento también se denominan pseudoclases de operación del usuario, como :hover, :active y :focus.
Para simplificar la enseñanza, lo escribo en línea. En aplicaciones reales, no se recomienda su uso en línea.
:enlace
Establezca el estilo del hipervínculo antes de saltar. El uso es el siguiente:
<ahref=#target=_blank>Saltar</a>
Si desea configurar el estilo antes del hipervínculo de arriba para que tenga un color de fuente rojo y sin subrayado, puede configurarlo así.
:visitado
Esta pseudoclase es todo lo contrario de :link. :link es el estilo antes del enlace y :visited es el estilo después del enlace, es decir, el estilo del hipervínculo después de ser visitado.
<ahref=#target=_blank>Saltar</a>:li
En el aprendizaje diario, todos pueden escribir los enlaces antes y después de ellos juntos, lo cual es conveniente, rápido y semántico, lo que lleva a que muchos estudiantes no sepan que estas dos pseudoclases tienen un efecto de cobertura; Los siguientes ejemplos pueden ayudarle a tener una comprensión general:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; decoración de texto: subrayado;}</style></head><body><ahref=login.htmltarget=_blank>Saltar</a></body></html>El código anterior es el enlace de salto desde la página HTML a la página de inicio de sesión. La representación después de la ejecución es la siguiente:
:flotar
El selector de pseudoclase :hover se utiliza para aplicar estilos a los efectos cuando el usuario mueve el mouse sobre el elemento. No solo se usa para hipervínculos, sino que también se puede aplicar a muchos elementos, como botones. Cuando pasa el mouse sobre él, encontrará que el color de fondo norte del botón se vuelve más oscuro o cambia de color. Por supuesto, hay otras formas de configurarlo, pero no hay duda: pasar el mouse es la forma más sencilla y rápida. Aquí primero presentaré las técnicas para usar hipervínculos y luego las expandiré y las usaré para cambiar el efecto después de que el mouse se mueva sobre el elemento.
Si desea que el elemento cambie de color cuando el mouse pasa sobre un elemento de etiqueta, el código es el siguiente:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:azul;}</style></head><body><ahref= #target=_blank>Saltar</a></body></html> 
Expandir
El código de estructura es el siguiente:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{ancho:100px;alto:50px;alto de línea:50px;color:rojo;fondo:naranja ;text-align:center;}</style></head><body><div>:hover</div></body></html>Cuando el efecto deseado es que cuando el mouse se mueve sobre el elemento div, el color de fondo cambia a negro y la fuente cambia a blanca. El código es el siguiente:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{ancho:100px;alto:50px;alto de línea:50px;color:rojo;fondo:o rango;text-align:center;transition:all1s;}div:hover{fondo:negro;color:blanco;}</style></head><body><div>:hover</div></body> </html>:activo
:active se utiliza para efectos de estilo cuando el usuario hace clic en un elemento. Se utiliza principalmente en controles de formulario. Cuando el usuario hace clic, tiene el efecto de presionar un botón. Por la misma razón, puse esto en el área de extensión.
Cuando se hace clic en un hipervínculo, quiero cambiar el color de fuente del hipervínculo. El código de implementación es el siguiente:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>Saltar</a></body></html>Expandir
Este ejemplo utiliza un div para imitar un botón. El estilo del botón que viene con HTML es difícil de describir en una palabra. Es fácil de imitar y controlar.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{ancho:100px;alto:50px;alto de línea:50px;text-align:center;fondo :verde;tamaño de fuente:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{fondo:orange;color:white;}</style></head><body><div> botón</div></body></html>:enfocar
:focus se usa para diseñar el efecto cuando un elemento multipropósito se convierte en foco. Esto se usa a menudo en elementos de control de formulario.
Código de estructura:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ cuerpo></html>
Cuando desee que la entrada obtenga foco, el color de fondo es #CCC y el código de implementación es:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#método=post><inputtype=text></form></body></html>Puede ver el efecto de estilo de cambiar el color de fondo al color de destino después de que la entrada se enfoca.
Cosas a tener en cuenta:
(1) El selector de pseudoclase anterior sigue el principio de orden, es decir, el enlace a la visitada se desplaza y luego a la pseudoclase activa.
(2) Hover y active se incluyen en la pseudocategoría de comportamiento del usuario.
primer hijo
La pseudoclase first-child puede coincidir con el primer elemento secundario del elemento principal especificado. Por ejemplo, ul li:first-child puede coincidir con el primer elemento <li> del elemento <ul>.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Coincide con la primera etiqueta <li>bajo <ul>*/color:red;}</style></head>< body> <ul><li>programación dotcpp</li><li>programación dotcpp</li><li>programación dotcpp</li></ul></body></html>Resultados de ejecución:
ast-niño
Similar al primer hijo, la pseudoclase último hijo puede coincidir con el último elemento secundario del elemento principal especificado. Por ejemplo, ul li:last-child puede coincidir con el último elemento <li> del elemento <ul>. El código de muestra es el siguiente:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Coincide con la última etiqueta <li>bajo <ul>*/color:red;}</style></head><body > <ul><li>programación dotcpp</li><li>programación dotcpp</li><li>programación dotcpp</li></ul></body></html>Resultados de ejecución:
enésimo niño
La pseudoclase nth-child es nueva en CSS3. Puede coincidir con el enésimo elemento secundario del elemento especificado. Por ejemplo, ul li:nth-child(2) puede coincidir con el segundo elemento <li> del elemento <ul>. El código de muestra es el siguiente:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Coincide con la segunda etiqueta <li>bajo <ul>*/color:red;}</style></ head> <body><ul><li>programación dotcpp</li><li>programación dotcpp</li><li>programación dotcpp</li></ul></body></html>Resultados de ejecución:
