El problema de prioridad es en realidad un problema de resolución de conflictos. Cuando un selector de CSS selecciona el mismo elemento (o contenido), se deben elegir diferentes reglas de CSS según la prioridad.
La primera es la especificidad de las reglas CSS. CSS2.1 tiene un conjunto de métodos de cálculo para la especificidad, que está representado por una cadena numérica de cuatro dígitos (CSS2 es de tres dígitos, cuanto mayor sea la especificidad, más). especial la regla. En la prioridad Será más ventajoso a la hora de emitir juicios. Con respecto al cálculo específico de la especificidad, existen las siguientes reglas generales para la suma numérica en diversas situaciones:
para cada selector de ID (#someid), agregue 0,1,0,0.
Cada selector de clase (.someclass), cada selector de atributos (formado como [attr=""], etc.), cada pseudoclase (formado como: hover, etc.) agrega 0, 0, 1, 0
a cada elemento o Pseudoelementos (:firstchild), etc., agregue 0,0,0,1
. Otros selectores incluyen el selector global *, agregue 0,0,0,0. Equivale a no agregarlo, pero esto también es una especie de especificidad, que se explicará más adelante.
De acuerdo con estas reglas, las cadenas numéricas se agregan poco a poco para obtener la especificidad calculada final y luego se comparan poco a poco en orden de izquierda a derecha al comparar y elegir.
Pongamos algunos ejemplos:
h1 {color: rojo;}
/* Sólo hay un bono de elemento ordinario, el resultado es 0,0,0,1 */
cuerpo h1 {color: verde;}
/* Suma dos elementos ordinarios, el resultado es 0,0,0,2 */
--Este último gana
h2.grape {color: morado;}
/* Se agregan un elemento ordinario y un selector de clase, y el resultado es 0,0,1,1*/
h2 {color: plata;}
/*Un elemento ordinario, el resultado es 0,0,0,1 */
--El primero gana
html > body table tr[id="totals"] td ul > li {color: granate;}
/* 7 elementos ordinarios, un selector de atributos, otros dos selectores, el resultado es 0,0,1,7 */
li#answer {color: azul marino;}
/* Un selector de ID, un selector normal, el resultado es 0,1,0,1 */
--Este último gana
Además de la especificidad, hay otros
estilos dentro del texto de la regla que tienen una prioridad de 1,0,0,0, por lo que siempre son más altos que las definiciones externas. Aquí, los estilos en el texto se refieren a estilos que se parecen a <div style="color: red">blah</div>, mientras que las definiciones externas se refieren a reglas definidas mediante etiquetas <link> o <style>.
Hay reglas de declaración importantes por encima de todo.
Si las declaraciones importantes entran en conflicto, se compara la precedencia.
Si las prioridades son las mismas, se determinarán en el orden en que aparecen en el código fuente, teniendo prioridad las posteriores.
Los estilos derivados de la herencia no tienen cálculos de especificidad, que son más bajos que todas las demás reglas (como las definidas por el selector global *).
Con respecto a los estilos externos cargados a través de @import, dado que @import debe aparecer antes de todas las demás definiciones de reglas (si no, el navegador debe ignorarlo), de acuerdo con el principio de último en llegar, primero en ser atendido, generalmente prevalecerán los conflictos de prioridad.
Debo mencionar aquí que IE puede reconocer @import en la posición incorrecta, pero no importa dónde esté @import, lo considera antes que todas las demás definiciones de reglas, lo que puede causar algunos malentendidos.
Por tanto, aunque la cuestión de la prioridad parece sencilla, detrás de ella todavía hay un mecanismo bastante complicado que requiere más atención.