Aunque cree que la razón puede ser un problema del navegador, es más probable que su definición de estilo sea un orden incorrecto. Para asegurarse de que pueda ver los estilos de conexión en diferentes estados, el orden de estilo correcto debería ser:
Enlace - Visited - Hover - Active o LVHA (abreviatura).
Contenido central:
Cada selector tiene una especificidad. Si se aplican dos selectores al mismo elemento, los selectores con mayor especificidad ganarán y tendrán prioridad. Por ejemplo:
P.Hithere {color: verde;} / * específico = 1,1 * /p {color: rojo;} / * específico = 1 * /
Cualquier contenido de párrafo con class class = HitHe se muestra en verde en lugar de rojo. Ambos selectores tienen un conjunto de colores, pero los selectores con mayor especificidad ganarán.
¿Cómo afectan las pseudo-clases de la especificidad? Tienen exactamente el mismo valor de ponderación, y los siguientes estilos tienen el mismo valor de ponderación específico:
A: enlace {color: azul;} / * específico = 1,1 * /a: activo {color: rojo;} / * específico = 1,1 * /a: hover {color: magenta;} / * específico = 1,1 * /a: visitado {color: púrpura;} / * específico = 1,1 * /
Estas son configuraciones de estilo para hipervínculos. En la mayoría de los casos, varios de estos estilos deben establecerse al mismo tiempo. Por ejemplo, se puede establecer un hipervínculo no visitado en diferentes estilos tanto en la activación del ratón como en la activación del mouse al flotar y hacer clic. Dado que las tres reglas anteriores se pueden aplicar a hipervínculos, y todos los selectores tienen la misma especificidad, luego, según las reglas, el último estilo gana. Por lo tanto, el estilo activo nunca se mostrará porque siempre está cubierto por el estilo de desplazamiento (es decir, se prefiere el flotador). Ahora analicemos cuál es el efecto del rouseover de hipervínculo que se ha visitado, y el resultado siempre es morado :( porque su estilo visitado siempre tiene prioridad sobre otras reglas de estilo de estado (incluidas las activas y el flujo).
Es por eso que CSS1 recomienda el orden de estilo:
A: Linka: Visitada: Hoversa: Activo
De hecho, el orden de los dos primeros estilos se puede cambiar, porque un hipervínculo no puede existir al mismo tiempo que los estados no alcanzados y accedidos. (: Link significa no visitado; no sé por qué no está definido así).
CSS2 ahora permite que las pseudo-clases aparezcan en grupos de la Unión, por ejemplo:
A: Visited: Hover {color: Maroon;} / * específico = 2,1 * /a: enlace: hover {color: magenta;} / * específico = 2,1 * /a: hover: activo {color: cyan;} / * específico = 2,1 * /
Tienen la misma especificidad, pero se aplican a bestias fundamentalmente diferentes, por lo que no conflictos. Puede obtener combinaciones activas flotantes, por ejemplo.
¿Cómo entender la especificidad involucrada en este artículo? La especificidad puede entenderse como una cadena numérica que no está simplemente conectada. Un ejemplo anterior: P.Hithere {color: verde;} / * especificidad = 11 * /p {color: rojo;} / * especificidad = 1 * /
Esta parece ser una operación simple basada en decimal. Sin embargo, el cálculo de la especificidad no puede usar algoritmos decimales. Por ejemplo, si usa 15 selectores juntos, sus valores ponderados específicos aún son más bajos que los selectores de clase simples. Por ejemplo:
.hello {color: rojo;} / * específico = 10 * /html Cuerpo Div ul li li ul li ul li ul li (color: verde;} / * específico = 15 * /
10 es en realidad una especificidad que sigue a 1 y luego cero, no diez. Podemos usar hexadecimal para describir las reglas de estilo anteriores, como las siguientes:
.hello {color: rojo;} / * específico = 10 * /html Body Div ul li li ul li ul li ul li li (color: verde;} / * específico = f * /
El único problema es que si desea agregar dos o más selectores a la segunda regla de estilo, entonces puede obtener un 17 específico que se confundirá nuevamente. De hecho, la especificidad puede ser infinita, por lo que para evitar más confusión, se recomienda usar comas para separar el valor específico.
Webmaster sugiere: Repita el cálculo del valor ponderado de la especificidad. La configuración del sitio web CSS refleja su capacidad para controlar la página. En el desarrollo dinámico del sitio web, el estado de CSS también es muy importante. ¡Lea más información, practique más y ven a Wulin.com más! Si le gusta este sitio, ¡promocionándolo en su nombre! Gracias por leer.