La diferencia entre pseudoclases y pseudoelementos.
(1) Clase, nombre de clase definido por el usuario. Esta clase es específica y visible, como div.div0. Seleccione el elemento div con clase div0.
(2) Pseudoclase, utilizada para agregar efectos especiales a ciertos selectores. Los estilos definidos con pseudoclases no actúan sobre la marca, sino sobre el estado de la marca, como :hover para la etiqueta a y :disabled para el elemento de formulario.
(3) Elementos como div, p, h1, etc. son elementos reales.
(4) Los pseudoelementos son elementos que no existen en HTML y solo se utilizan para representar en CSS. Los pseudoelementos crean un contenedor virtual. Este contenedor no contiene ningún elemento DOM, pero puede contener contenido. Como ::antes, ::después.
Selector de pseudoclase
El propósito de las pseudoclases es utilizar selectores para encontrar información que no existe en el árbol DOM y que no se puede obtener mediante selectores CSS normales. Las pseudoclases suelen representar un "estado". Una pseudoclase comienza con dos puntos: seguido del nombre de la pseudoclase y los parámetros opcionales entre paréntesis.
pseudoclase de anclaje
Si configura los cuatro estados de una etiqueta, el orden debe ser LVHA, es decir: enlace, :visitado, :hover, :activo.
En circunstancias normales, solo necesita configurar el efecto predeterminado de la etiqueta a y el efecto del cruce del mouse, a{}, a:hover{}.
selector de pseudoclase de destino
:target Estilo de destino después del hipervínculo Cuando se utiliza un hipervínculo, el destino del enlace se puede configurar con el selector de destino. El estilo correspondiente se mostrará solo después de saltar el destino.
El valor del atributo href de la etiqueta a puede apuntar a la dirección del enlace, la identificación de la etiqueta o el nombre de la etiqueta a.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Botón 1</a></ p><p><ahref=#news2>Botón 2</a></p><aname=news1>Contenido 1</a><divid=news2>Contenido 2</div>Cuando se hace clic en el botón 2, se muestra el resultado:
Selector de pseudoclase de elemento de formulario
:in-range solo funciona en elementos que pueden especificar valores de intervalo, como los atributos mínimo y máximo en el elemento de entrada;
:invalid solo funciona en elementos que pueden especificar valores de intervalo, como los atributos mínimo y máximo en el elemento de entrada, el campo de correo electrónico correcto, campos numéricos legales, etc.
Selector de pseudoclase estructural
<style>p:first-child{color:red;}/*El primer elemento es h1, por lo que no está seleccionado*/p:first-of-type{color:blue;}p:nth-child(4) { color:verde;}/*El cuarto elemento es sp an, por lo que no está seleccionado*/p:nth-of-type(4){color:pink;}p:only-child{color:amarillo;}/*La séptima p está seleccionada, pero el estilo se sobrescribe* / p:solo-de-tipo{color:naranja;}/ *Se seleccionan la 7ª y 8ª p*/</style><h1>Título 1</h1><p>La primera p</p><p>La segunda p</p><span >Contenido del texto</ span><p>La tercera p</p><p>La cuarta p</p><p><i>Contenido del texto</i>La quinta p</p> <p>El sexto p</p><h5>Título 5</h5><div><p>El séptimo p</p></div><div><p>El octavo p</p> p ><span>Contenido del texto</span></div><div><p>La novena p</p><p>La décima p</p></div>Resultados de ejecución:
Negar selectores de pseudoclase
Pseudoelemento
Los pseudoelementos crean algunos elementos abstractos en el árbol DOM. Estos elementos abstractos no existen en el lenguaje del documento (pueden entenderse como código fuente html). Por ejemplo: la interfaz del documento no proporciona un mecanismo para acceder a la primera palabra o línea del contenido del elemento, pero los pseudoelementos permiten a los desarrolladores extraer esta información. Además, algunos pseudoelementos permiten a los desarrolladores obtener contenido que no existe en el documento fuente. Un pseudoelemento comienza con dos dos puntos::, seguidos del nombre del pseudoelemento.
En pocas palabras, los pseudoelementos crean un contenedor virtual que no contiene ningún elemento DOM, pero puede contener contenido.
En el selector de pseudoelemento en CSS3 y el selector de pseudoclase en CSS2, el antes y el después son exactamente iguales.
Sólo existen los siguientes pseudoelementos:
El atributo de contenido se utiliza con los pseudoelementos :before y :after para insertar contenido generado. Puedes usar pseudoclases + pseudoelementos.
Peso del estilo CSS
reglas de prioridad CSS:
(1) Cuando los valores de peso de las reglas de selección de CSS son diferentes, tendrá prioridad el que tenga el valor de peso mayor;
(2) Cuando los valores de peso de las reglas de selección de CSS son los mismos, la regla definida más adelante tiene prioridad;
(3) Cuando se agrega !importand después del atributo CSS, se dará prioridad absoluta incondicional;
Cálculo del valor del peso: