1. Lvha
debería ser realmente lvfha, a saber:
a:link {/* 未访问过的超链接的样式 */}
a:visited {/* 访问过的超链接的样式 */}
a:focus {/* 拥有焦点的超链接的样式 */}
a:hover {/* 鼠标悬停的超链接的样式 */}
a:active {/* 被用户输入激活的超链接的样式 */}
Estas 5 son todas pseudocategorías, que representan 5 estados, entre los cuales el enlace y el visitado están dedicados a hipervínculos y se pueden clasificar en pseudocategorías de enlace, mientras que el foco, el hover y el activo son aplicables a otros elementos además de los hipervínculos, llamados dinámicos. Pseudoclase
El principio lvfha es que cuando las cinco pseudoclases anteriores se aplican a hipervínculos (etiquetas con atributos href), se debe observar este orden fijo
2. Pseudo-clases y pseudo-elementos Las
pseudo-clases son como clases, utilizadas para seleccionar un elemento que ya existe en el árbol DOM. Hay dos condiciones de selección:
Estado: si el elemento está en un estado determinado, por ejemplo, el usuario ha visitado (enlace / visitado), tiene el foco en este momento y se encuentra en un entorno de idioma determinado (lang)
Estructura: ¿El elemento cumple con ciertos requisitos estructurales del DOM, como el elemento como el hijo mayor (primer hijo), el elemento como elemento raíz (raíz) y muchas pseudoclases estructuradas (nth - , -De tipo, etc.)
Los pseudoelementos son más como elementos y se utilizan para seleccionar elementos (o parte de un elemento) que no existen en el árbol DOM. En comparación con la próspera familia de pseudo-clases, los pseudo-elementos parecen ser un poco solitarios. Hasta ahora (2017/11/4), todavía hay solo 4 pseudo-elementos en la especificación CSS3 (CSS2.1 es 4):
Primera letra: la primera letra del contenido de texto incluido en el elemento seleccionado (el contenido de texto contiene subelementos, lo que significa que el texto se puede seleccionar en todos los niveles de etiqueta)
Primera línea: seleccione la primera línea del contenido de texto contenido en el elemento (igual que arriba)
antes: se utiliza para la generación de contenido, un elemento se genera al comienzo del contenido del elemento especificado (el contenido generado se encuentra en el área de contenido del elemento)
after: utilizado para la generación de contenido, genera un elemento al final del contenido del elemento especificado (igual que arriba)
La mayor diferencia entre una pseudoclase y un pseudo-elemento es si el contenido de destino a seleccionar existe en el DOM. Si existe, es una pseudo-clase, y si no existe, es un pseudo-elemento. Desde otra perspectiva, si desea especificar un estilo para una determinada parte del documento, primero debe seleccionar esta parte del contenido (a través del selector). En este momento, se encontrará con dos situaciones:
El contenido de destino está envuelto por una etiqueta, y establecer el estilo de toda la etiqueta puede lograr el objetivo.
No hay ninguna etiqueta antes ni después del contenido de destino, y el estilo no se puede establecer directamente. Debe insertar una etiqueta temporal para encerrar el contenido de destino y luego establecer el estilo para esta etiqueta temporal.
El primer caso es manejado por pseudo-clases, el selector de pseudo-clases se usa para encontrar elementos existentes en un cierto estado o con ciertas características estructurales, y luego aplicar el estilo. El segundo caso es insertar manualmente etiquetas adicionales y convertirlas al primer caso (algunas escenas no se pueden hacer agregando etiquetas, como la primera línea, o escenas en los niveles de etiquetas), o se puede resolver mediante pseudoelementos, que es equivalente a navegar Ayude a insertar etiquetas virtuales para delinear el contenido de destino y luego aplique el estilo
PD Para obtener más información sobre los selectores CSS3, consulte el resumen de clasificación del selector CSS
Tres. Los seis estados de una etiqueta La
pseudoclase lvfha proporciona cinco estados para hipervínculos, el sexto se refiere a puntos de anclaje, no a hipervínculos.
Uno de los significados de la existencia de la pseudoclase de enlace es distinguir entre hipervínculos y anclajes. La pseudoclase de enlace solo coincide con una etiqueta con href (es decir, un hipervínculo), no un ancla
En un entorno de navegador de escritorio general, los 6 estados de la etiqueta a y los comportamientos de activación correspondientes son:
a {/* 处于任意状态的a标签，不论是超链接还是锚点 */}
a:link {/* 未访问过的超链接 */}
a:visited {/* 访问过的超链接，点击超链接再返回当前页，这个超链接就处于visited状态 */}
a:focus {/* 获得焦点的超链接，tab键选中超链接或者长按超链接再移开鼠标 */}
a:hover {/* 鼠标悬停的超链接，鼠标经过超链接时或悬停在超链接上时，这个超链接就处于hover状态 */}
a:active {/* 处于激活状态的超链接，鼠标在超链接上按下时 */}
Entre ellos, el enfoque, el desplazamiento y el activo no son fáciles de distinguir. El enfoque es un estado continuo, mientras que el desplazamiento y el activo son estados transitorios. Si subdivides el cursor y el activo, el último es un estado especial del primero (excepto para dispositivos táctiles) ,P.ej:
a:focus {border: 1px solid green;}
a:hover {border-color: red;}
a:active {border-style: dashed;}
Entonces, los estados y estilos correspondientes de las siguientes operaciones continuas son:
按下tab键 -> focus -> 绿色实线边框
点击其它空白处 -> a & link | visited -> 对应样式
鼠标划过时 -> hover -> 无边框
鼠标悬停时 -> hover -> 无边框
鼠标按下 -> focus & hover & active -> 红色虚线边框
鼠标移到超链接之外再抬起 -> focus -> 绿色实线边框
（不点击其它地方的话，超链接将一直处于focus状态）
鼠标划过时 -> focus & hover -> 红色实线边框
Debido a que el foco es un estado de continuidad, debe colocarse antes del desplazamiento transitorio y activo; de lo contrario, el estilo de desplazamiento no aparecerá cuando se deslice el mouse (de acuerdo con las reglas en cascada, el desplazamiento declarado primero será sobrescrito por el enfoque)
Debido a que los tres estados de enfoque, desplazamiento y activo se superponen, se recomienda mantener un orden de declaración específico para que el resultado en cascada cumpla con las expectativas del redactor de la hoja de estilo. Y enlace y visitado son mutuamente excluyentes, no hay superposición, por lo que el orden relativo de los dos no es importante (vlfha también es razonable, el orden "amor y odio" es fácil de recordar). De manera similar, debido a que el enlace / visitado es un estado permanente, para dar al estado transitorio y al estado persistente la oportunidad de funcionar, coloque el foco / hover / activo detrás y haga que la prioridad en cascada del estado largo sea más baja, por lo que hay principio lvfha
Además, la especificación no establece claramente las condiciones de inicio y finalización para los estados correspondientes de enfoque, desplazamiento y activo:
CSS no define qué elementos pueden estar en los estados anteriores y cómo estos estados entran y salen. Los scripts pueden cambiar si el elemento responde a los eventos del usuario, y diferentes dispositivos y UA apuntan y activan elementos de diferentes maneras
CSS 2.1 no define si el padre de un elemento ': active' o ': hover' también está en este estado
(Desde 5.11.3 pseudoclases dinámicas:: hover,: active y: focus)
Por lo tanto, es imposible determinar el comportamiento de disparo de las pseudoclases dinámicas, ni se puede determinar a qué elementos son aplicables estas pseudoclases (elementos de formulario, divs, etc. pueden o no ser compatibles), dependiendo de la implementación del agente de usuario.
4. Se
recomienda seguir el orden lvfha de las pseudoclases combinadas para considerar las reglas en cascada; de lo contrario, se puede sobrescribir, dando como resultado reglas inválidas con el mismo nombre. P.ej:
a:hover {text-decoration: underline overline;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
El estilo de desplazamiento (sugerencia: muestra tanto el sobrelínea como el subrayado cuando el mouse está sobre) nunca tendrá efecto, porque el atributo de decoración de texto siempre será sobrescrito por uno de los siguientes dos
Por supuesto, el requisito previo es que cuando hay conflictos en las reglas de estilo (los atributos del mismo nombre y la fuente, importancia y particularidad son los mismos), los conflictos se resuelven según el orden de declaración y el orden lvfha realmente funciona en este momento. En otras palabras, si no hay conflicto de estilo, el orden de declaración no es importante
En otras palabras, para evitar conflictos de estilo de otras formas, no es necesario seguir el orden lvfha, como combinar pseudoclases para expandir el estado:
/* 不要求顺序 */
:link
:visited
:link:hover
:visited:hover
/* 要求顺序 位于上2行之后 */
:link:active
:visited:active
/* 或者替掉上2行 不要求顺序 */
:link:hover:active
:visited:hover:active
Después de desarrollarse, no hay un estado superpuesto, de modo que cada regla se vuelve estrictamente mutuamente excluyente y, naturalmente, no hay conflicto.
PD Nota: Debido a que IE6- no puede manejar las pseudoclases combinadas correctamente, solo se reconoce la última, por lo que lvha se usa más ampliamente (de hecho, la semántica de las pseudoclases combinadas es más clara y no hay "reglas extrañas ocultas")
Además, puede utilizar reglas en cascada para lograr efectos especiales, como:
// 用lhva实现只有未访问的链接才有hover效果
a:link {}
a:hover {}
a:visited {}
a:active {}
Consejos muy interesantes, equivalentes a:
a:link:hover {}
Esto refleja la clara ventaja semántica de las pseudoclases combinadas
Contacto ayqy