¿Cuál es la diferencia entre pseudo-clases y pseudo-elementos?
¿Cuál es la diferencia entre div::after {} y div:after {} ? ¿Cuándo tenemos que usar :: sobre :?
La notación de dos puntos y un solo dos puntos es distinguir entre pseudo-clases y pseudo-elementos.
¿Cuál es el significado real de la declaración anterior?
2 answers
Pseudo-clase:
Una pseudo-clase CSS es una palabra clave, precedida por dos puntos (:), añadida al final de los selectores para especificar que desea estilizar los elementos seleccionados, y solo cuando están en cierto estado. Por ejemplo, es posible que desee darle estilo a un elemento solo cuando el puntero del ratón lo esté pasando por encima, o casilla de verificación cuando está deshabilitado o marcado, o un elemento que es el primer hijo de su padre en el árbol DOM.
Ejemplos:
- : activo
- : comprobado
- : nth-child()
- : primero
- : hover
Pseudo-elementos ::
Los pseudo-elementos son muy parecidos a las pseudo-clases, pero tienen diferencias. Son palabras clave, esta vez precedidas de dos puntos (::), que se pueden añadir al final de los selectores para seleccionar una parte determinada de un elemento.
Ejemplos:
- :: después de
- :: antes
- :: primera letra
- :: primera línea
- ::selección
- :: telón de fondo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-05 04:05:58
Pseudo-clases: se aplica automáticamente por el navegador dependiendo de la posición del elemento o su estado interactivo.
Por Ejemplo :
E:hover Coincide con elementos de tipo E cuando el cursor es
flotando sobre él.
Pseudo-elementos: Se aplica estilos al contenido basado en su posición en la jerarquía HTML.
Por Ejemplo :
E::first-letter Esto aplica un estilo a la primera letra de la primera línea dentro de un nivel de bloque
elemento E.
Entonces,
La especificación de selectores CSS3 prefigura pseudo-elementos con dos puntos en lugar de uno. Así :primera carta se convierte en ::first-letter y :primera línea se convierte en ::first-line. IE 8 y anteriores no entienden el prefijo de dos puntos, por lo que necesita usar las versiones de un solo punto para evitar que los estilos se rompan en los navegadores más antiguos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-26 06:09:13