Pseudo de CSS-clases (pseudoclases)

Los selectores de pseudoclases de CSS coinciden con componentes basados en otras condiciones, no necesariamente definidas por el árbol de documentos. Los pseudoclases de CSS son palabras clave adicionadas a los selectores que especifican el estado especial de los elementos a seleccionar. Por ejemplo, :hover se puede usar para cambiar el color del botón cuando el usuario coloca el mouse sobre él.

¿Qué son los pseudoclases?

Los pseudoclases de CSS le permiten establecer el estilo de estado dinámico de los elementos, como el estado de suspensión, el estado activo y el estado de foco, así como los elementos existentes en el árbol de documentos que no pueden ser seleccionados como objetivo mediante otros selectores, sin agregarles ID o clases, como, por ejemplo, los primeros o últimos elementos hijos.

Las pseudo-classes comienzan con un dos puntos (冒号:). Su gramática se puede proporcionar de la siguiente manera: }}

La siguiente sección describe las pseudo-classes más comunes.

pseudo-classes de ancla

usaranclaLas pseudo-classes de enlace se pueden mostrar de diferentes maneras:

Estas pseudo-classes te permiten estilizar enlaces no visitados y enlaces visitados. La técnica más común de configuración de estilo es quitar la subrayada de los enlaces visitados.

a:link {
　　　　color: azul;
}
a:visited {
　　　　texto-decoration: nulo;
}

Algunas pseudo-classes de ancla son dinámicas-Se aplican debido a la interacción del usuario con el documento (por ejemplo, al pasar el ratón o enfocar, etc.).

a:hover {
　　　　color: rojo;
}
a:active {
　　　　color: gris;
}
a:focus {
　　　　color: amarillo;
}

Estas pseudo-classes cambian la forma en que se presentan los enlaces en respuesta a las operaciones del usuario.

• :hover se aplica cuando el usuario coloca el cursor sobre el elemento sin seleccionarlo.

• :active se aplica cuando el elemento se activa o se hace clic.

• :focus se aplica cuando el elemento tiene el foco del teclado.

:first-pseudoclase child

:first-El pseudoclase child coincide con el primer elemento del subelemento de algunos otros elementos. ol li:first-En el siguiente ejemplo, el selector selecciona el primer elemento de la lista ordenada y elimina el borde superior.

ol li:first-child {
　　　　borde-top: nulo;
}

:last-pseudo-classes

:last-El pseudoclase child coincide con el último elemento del elemento del subelemento de algunos otros elementos. ul li:last-El selector del pseudoclase child selecciona el último elemento de la lista desordenada y elimina el borde derecho.

ul li:last-child {
　　　　borde-right: nulo;
}

:nth-pseudoclase child

CSS3Se ha introducido un nuevo :nth-La pseudoclase child permite que pueda usar un o varios elementos hijos específicos de un elemento dado como objetivo. La sintaxis básica de esta elección puede combinarse con :nth-child(N), donde N es un parámetro que puede ser un número, un nombre (even o odd) o una expresión en la forma xn+y, donde x e y son enteros (por ejemplo1n,2n,2n+1，...).

table tr:nth-child(2n) td {
　　　　background: #eee;
}

La regla de estilo en el ejemplo anterior resalta la celda en lugar de agregar algún ID o clase al elemento.

Pseudoclase :lang

La pseudoclase :lang de lenguaje permite construir selectores según la configuración de lenguaje de marcado específico.Se definió la comilla no para los elementos que asignan explícitamente un valor de lenguaje.

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　Fragmento de código HTML　*/Texto some texto Una cita en un párrafo some texto.

Pseudoclases y clases de CSS

Los pseudoclases pueden combinarse con clases de CSS.

class="red" en el siguiente ejemplo, los enlaces que contienen se mostrarán en rojo.

a.red:link {　　　　/*　regla de estilo　*/
　　　　color: #ff0000;
}
<a class="red" href="#">Haz clic aquí</a>　　　　/*　Fragmento de código HTML　*/