A questão da prioridade é na verdade uma questão de resolução de conflitos. Quando o mesmo elemento (ou conteúdo) é selecionado por um seletor CSS, diferentes regras CSS devem ser escolhidas de acordo com a prioridade.
A primeira é a especificidade das regras CSS. CSS2.1 possui um conjunto de métodos de cálculo para especificidade, que é representado por uma sequência numérica de quatro dígitos (CSS2 tem três dígitos. No final, quanto maior a especificidade, maior). especial a regra. Na prioridade Será mais vantajoso ao fazer julgamentos. Em relação ao cálculo específico da especificidade, existem as seguintes regras gerais para adição numérica em diversas situações:
para cada seletor de ID (#someid), adicione 0,1,0,0.
Cada seletor de classe (.someclass), cada seletor de atributo (formado como [attr=""], etc.), cada pseudoclasse (formada como: hover, etc.) adiciona 0, 0, 1, 0
a cada elemento ou Pseudoelementos (:firstchild), etc., adicione 0,0,0,1
. Outros seletores incluem o seletor global *, adicione 0,0,0,0. Equivale a não adicionar, mas também é uma espécie de especificidade, que será explicada mais adiante.
De acordo com essas regras, as cadeias numéricas são adicionadas bit a bit para obter a especificidade calculada final e, em seguida, comparadas bit a bit, da esquerda para a direita, ao comparar e escolher.
Vamos dar alguns exemplos:
h1 {cor: vermelho;}
/* Existe apenas um bônus de elemento comum, o resultado é 0,0,0,1 */
corpo h1 {cor: verde;}
/* Adicione dois elementos comuns, o resultado é 0,0,0,2 */
--O último vence
h2.grape {color: purple;}
/* Um elemento comum e um seletor de classe são adicionados e o resultado é 0,0,1,1*/
h2 {cor: prata;}
/*Um elemento comum, o resultado é 0,0,0,1 */
--O primeiro ganha
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 elementos comuns, um seletor de atributos, dois outros seletores, o resultado é 0,0,1,7 */
li#resposta {cor: azul marinho;}
/* Um seletor de ID, um seletor normal, o resultado é 0,1,0,1 */
--O último vence
Além da especificidade, existem alguns outros
estilos de estilo dentro do texto da regra que têm prioridade de 1,0,0,0, portanto, são sempre superiores às definições externas. Aqui, os estilos no texto referem-se a estilos que se parecem com <div style="color: red">blah</div>, enquanto as definições externas referem-se a regras definidas por meio de tags <link> ou <style>.
Existem regras de declaração !important acima de tudo.
Se as declarações !important entrarem em conflito, a precedência será comparada.
Se as prioridades forem iguais, serão determinadas na ordem em que aparecem no código-fonte, tendo precedência as posteriores.
Os estilos derivados de herança não possuem cálculos de especificidade, que são inferiores a todas as outras regras (como as definidas pelo seletor global *).
Em relação aos estilos externos carregados via @import, já que @import deve aparecer antes de todas as outras definições de regras (caso contrário, o navegador deve ignorá-lo), portanto, de acordo com o princípio do último a chegar, primeiro a ser servido, geralmente prevalecerão os conflitos de prioridade.
Preciso mencionar aqui que o IE pode reconhecer o @import na posição errada, mas não importa onde o @import esteja, ele considera que está antes de todas as outras definições de regras, o que pode causar alguns mal-entendidos.
Portanto, embora a questão prioritária pareça simples, ainda existe um mecanismo bastante complicado por trás dela, que requer mais atenção.