Tabla de contenido

Prefacio:

En el artículo anterior, presentamos algunos selectores comunes en detalle. En estos artículos, presentaremos un selector común en CSS: selector de pseudoclase. Hay muchos tipos. Espero que pueda comprenderlo mejor.

Selector de pseudo clase:

Un selector de pseudoclase es una forma especial de seleccionar elementos en CSS, especificado mediante el uso de dos puntos (:) y un nombre de pseudoclase después del selector. Los selectores de pseudoclase pueden seleccionar elementos con un estado o condición específicos, no solo en función de atributos estáticos como nombres de etiquetas o nombres de clases.

Los selectores de pseudoclase se pueden usar junto con otros selectores para seleccionar y aplicar estilos con mayor precisión a diferentes elementos de un documento.

CONSEJOS:
Las pseudo-clases no son clases, son solo un estado especial de los elementos. Las pseudo-clases son herramientas poderosas y flexibles en CSS. Nos permiten diseñar estilos más interactivos y dinámicos de acuerdo con diferentes estados y posiciones de los elementos.

Selectores de pseudoclase comunes:

1.:hover (estado de desplazamiento) Cuando el mouse pasa sobre el elemento, puede definir un estilo específico para el elemento. Por ejemplo, puede cambiar el color o el color de fondo de un enlace cuando el mouse está sobre él:

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

2. :activo (estado activado):
cuando el elemento está activado (por ejemplo, al hacer clic), se puede aplicar un estilo específico. Esta pseudoclase generalmente se usa en botones o enlaces para proporcionar comentarios de clic al usuario:

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

3. :focus (estado de enfoque):
cuando el elemento recibe el foco, se puede aplicar un estilo específico. Se usa principalmente en elementos de formulario para resaltar el elemento enfocado actualmente mientras el usuario está escribiendo:

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

4. :visited (enlace visitado):
seleccione el enlace visitado y establezca un estilo específico para él. Esto se usa a menudo para cambiar el color de los enlaces visitados para que los usuarios puedan distinguir en qué enlaces ya se ha hecho clic:

   a:visited {
     color: purple;
   }

5. :first-child (el primer elemento secundario):
seleccione el primer elemento secundario del elemento principal y establezca el estilo para él. Esto se puede usar para seleccionar el primer elemento en una lista u otras situaciones en las que se debe resaltar el primer elemento secundario:

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

6. :last-child (el último elemento secundario):
seleccione el último elemento secundario del elemento principal y establezca un estilo para él. Esto se puede usar para seleccionar el último elemento en una lista u otras situaciones en las que se debe resaltar el último elemento secundario:

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

7. :nth-child(n) (el enésimo elemento secundario):
seleccione el elemento secundario en una posición específica en el elemento principal y establezca un estilo para él. Puede usar este selector de pseudoclase para aplicar estilos según la posición de los elementos secundarios, donde n es un número que indica la posición:

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

El ejemplo anterior seleccionará el segundo elemento `<p>` dentro del elemento principal y establecerá su color de texto en azul.

Ejemplo:

Por ejemplo, si creamos una etiqueta a, todos sabemos que si se accede a la etiqueta a, se pondrá violeta, y cuando no se accede, será azul, en este momento, si queremos que la etiqueta a esté roja cuando no se acceda , será púrpura normal cuando se acceda . ¡No podemos hacerlo con el conocimiento que aprendimos 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:

Descubrimos que ya sea que hayamos visitado este enlace, el texto "Ir a Bilibili" siempre está rojo, independientemente de si lo hemos visitado o no, lo que no puede lograr los resultados que queríamos antes, por lo que presentamos el concepto de selectores de pseudoclase, utilizando selectores de pseudoclase para seleccionar elementos con estados o condiciones específicas.

Ortografía correcta:

<!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:

Después de visitar:

Consejos:

Cuando nuestro selector de pseudoclase modifica la etiqueta a, generalmente tenemos un orden fijo, que es enlace->visitado->pasar->activo

Esto se debe a que este orden garantiza que las reglas de estilo se apliquen correctamente.

El selector de pseudoclase :link se aplica a los enlaces no visitados y especifica el estilo del enlace de forma predeterminada. Esta pseudoclase generalmente se coloca primero, porque es el estado más básico y el estilo predeterminado debe definirse primero.
El selector de pseudoclase :visited se aplica a enlaces que ya han sido visitados, lo que especifica el estilo del enlace visitado. Sigue a `:link`, porque los dos pseudo-selectores son para diferentes estados del mismo elemento.
El selector de pseudoclase :hover se aplica al estado cuando el mouse se desplaza sobre el enlace, lo que especifica el estilo del enlace cuando el mouse se desplaza. Viene primero porque el estado de desplazamiento es a veces un estado importante para que un usuario interactúe con un enlace.
El selector de pseudoclase :active se aplica al estado cuando se activa el enlace (como el mouse hacia abajo o la tecla hacia abajo), especifica el estilo del enlace cuando se activa. Por lo general, viene en último lugar porque representa el estado transitorio del enlace y no se conserva después de que se completa la interacción del usuario.

Escribir las reglas de estilo en este orden garantiza que los estilos vinculados se apliquen como se espera. Además, este orden también se ajusta a los hábitos de uso generales y las convenciones de los desarrolladores, lo que ayuda a la legibilidad y mantenimiento del código.

Si no modifica el estado de una etiqueta en este orden, es posible que algunas modificaciones no aparezcan normalmente.

Por ejemplo:

Queremos que la etiqueta sea roja cuando el mouse esté sobre y verde cuando se haga clic en el mouse, por lo que debemos cumplir estrictamente con este orden: coloque el cursor sobre activo:

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

Si se invierte el orden, la pestaña no será verde cuando esté activa.

Cabe señalar que no todos los selectores de pseudoclase deben organizarse en este orden. Este orden es más aplicable a los pseudo-selectores de las etiquetas `a`, los pseudo-selectores de otros elementos pueden tener diferentes convenciones de orden.

Resumir:

En este capítulo, presentamos en detalle el selector de pseudo-clase, que nos permite modificar específicamente los diferentes estados de la etiqueta.Es un selector muy práctico, pero al mismo tiempo tiene una variedad de tipos, por lo que debemos recordar más.

Si mi contenido es útil para ti, dale me gusta, comenta y marca . ¡La creación no es fácil, el apoyo de todos es mi motivación para perseverar!

[Aprende CSS desde cero | Parte 2] Selectores de pseudoclase