CSS introduce los conceptos de pseudoclases y pseudoelementos para formatear información más allá del árbol del documento. En otras palabras, las pseudoclases y pseudoelementos se utilizan para modificar partes que no están en el árbol del documento, como la primera letra de una oración, o el primer elemento de una lista, o cuando el mouse se coloca sobre un determinado El estilo que se establecerá cuando el hipervínculo esté activado.
¿Qué son los pseudoelementos?
Pseudoelementos: se utilizan para crear algunos elementos que no están en el árbol del documento y agregarles estilos. De hecho, los pseudoelementos son cosas que los selectores ordinarios no pueden hacer antes o después de ciertos elementos. El contenido del control es el mismo que el del elemento, pero en sí mismo es una abstracción basada en elementos y no existe en la estructura del documento. Por ejemplo, podemos usar :before para agregar texto delante de un elemento y agregar estilos a este texto.
Características del elemento
1. Ventajas:
(1) No ocupe nodos DOM y reduzca la cantidad de nodos DOM.
(2) Deje que CSS ayude a resolver algunos problemas de JavaScript y simplifique el desarrollo.
(3) Evite agregar elementos de página sin sentido.
2. Desventajas:
(1) No propicio para la depuración.
(2) Los pseudoelementos no se reflejan realmente en el contenido del documento, solo se reflejan en el efecto visual, por lo que no puede agregar contenido práctico a los pseudoelementos y esta parte del contenido no será rastreada por los motores de búsqueda.
CSS proporciona una serie de pseudoelementos, como se muestra en la siguiente tabla:
1. ::después
El pseudo elemento :: after puede insertar algún contenido después del elemento especificado. En :: after, debe usar el atributo de contenido para definir el contenido que se agregará, y en :: after, debe definir el atributo de contenido para que surta efecto. (no es necesario insertar ningún contenido) El valor del atributo de contenido se puede definir como vacío).
2. :: antes
El pseudo-elemento::antes puede insertar algún contenido antes del elemento especificado. Similar a ::after, el atributo de contenido también debe usarse en ::before para definir el contenido que se agregará, y el atributo de contenido debe definirse en ::before para que surta efecto (cuando no hay contenido para insertar, el valor del atributo de contenido se puede definir como nulo).
3. ::primera letra
Pseudo elemento::primera letra se usa para establecer el estilo del primer carácter del contenido en el elemento especificado. Generalmente se usa con atributos de tamaño de fuente y flotante para crear un efecto de letra capitular. Cabe señalar que el pseudoelemento :: primera letra solo se puede usar para elementos a nivel de bloque. Si los elementos en línea quieren usar este pseudoelemento, primero deben convertirse a elementos a nivel de bloque.
4. ::primera línea
El pseudo elemento::primera línea se usa para establecer el estilo de la primera línea de contenido en el elemento especificado. De manera similar a ::primera letra, el pseudo elemento::primera línea solo se puede usar para elementos a nivel de bloque. Los elementos en línea quieren usar este pseudoelemento, primero deben convertirlo en un elemento a nivel de bloque.
5. ::selección
Pseudo elemento::selección se utiliza para establecer el estilo cuando se selecciona el objeto. Cabe señalar que el pseudo elemento::selección solo puede definir el color, el fondo, el cursor, el contorno y la sombra del texto cuando se selecciona el elemento (IE11). aún no lo admite. Defina este atributo) y otros atributos.
6. :: marcador de posición
Pseudo elemento::marcador de posición se utiliza para establecer el texto del marcador de posición (texto establecido a través del atributo de marcador de posición de HTML) de los elementos del formulario (elementos <input>, <textarea>).