Recentemente vi um blog com uma explicação melhor sobre a prioridade do CSS. Embora existam artigos relacionados na Internet, ainda o repassei para sua referência.
A explicação detalhada da pronúncia da prioridade CSS inclui quatro níveis (seletor de texto, seletor de ID, seletor de classe, seletor de elemento) e o número de ocorrências de cada nível. A prioridade do CSS é calculada com base no número de ocorrências destes quatro níveis.
A seguir está uma citação: [Reproduzido do Blog do GOVO]
A leitura prioritária deverá ser dividida em “grupos”. Os grupos são independentes entre si e comparados da esquerda para a direita. Eles aparecem em grupos, separados por vírgulas.
Exemplo de código-fonte
[www.downcodes.com] seletor (a, b, c, d)
comparar: ↑ , ↑ , ↑ , ↑
selector (a, b, c, d), conforme mostrado no texto original em w3c.org, é dividido em quatro grupos a, b, c, d, todos são inteiros positivos e o padrão é 0, correspondendo a diferentes seletores estruturas e composições se formam. Ao comparar as prioridades entre os seletores, compare um a um da esquerda para a direita. Quando a comparação for maior, a comparação poderá ser interrompida.
Exemplo de código-fonte
[www.downcodes.com] li.red.level {} /* a=0 b=0 c=2 d=1 -> especificidade = 0 , 0 , 2 , 1 */
/*comparar ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> especificidade = 0 , 0 , 1 , 1 */
/*comparar ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> especificidade = 0 , 0 , 1 , 3 */
/*comparar ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> especificidade = 0 , 1 , 0 , 0 */
/*comparar ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */(Na tabela acima, ↑ significa que a comparação ainda é necessária, e √ significa que o o resultado foi obtido a partir daqui resultado)
Além disso, desde que escrito corretamente, a estrutura do seletor pode ser conhecida aproximadamente apenas a partir da prioridade, como:
1,0,0,0 indica o estilo dentro do elemento;
0,2,1,1 representa um seletor que consiste em dois seletores de ID, uma classe ou pseudoclasse ou seletor de atributos e um seletor de elemento.
Detalhes das regras de precedência CSS: Depois de corrigir a pronúncia, podemos começar a falar sobre as regras detalhadas:
O valor do grupo a será apenas 1 quando CSS for escrito no atributo style, caso contrário será 0. A instrução de estilo escrita em style não é na verdade um seletor, então os valores do grupo b, c e d aqui são todos 0 e apenas o real. Somente o seletor terá valores dos grupos b, c, d.
O valor do grupo b é determinado pelo seletor de ID #ID, quantos seletores de ID existem e o valor do grupo será acumulado;
O grupo de valores c é determinado pela classe, pseudoclasse e seletor de atributos, e o grupo de valores será acumulado;
O d grupo de valores é determinado pelo nome do elemento, ou seja, o seletor do elemento, e o grupo de valores será acumulado;
Observe que esses quatro conjuntos de valores correspondem a diferentes tipos de seletores e não afetam uns aos outros. Eles são comparados de acordo com as regras de leitura.
!importante, o princípio da proximidade e a herança não são discutidos aqui e não há nenhum código de exemplo. Todos são bem-vindos ao W3Cbbs.com para discutir!
Aqui está um exemplo: problemas de prioridade de CSS
A prioridade CSS inclui quatro níveis (seletor de texto, seletor de ID, seletor de classe, seletor de elemento) e o número de ocorrências de cada nível. A prioridade do CSS é calculada com base no número de ocorrências destes quatro níveis.
As regras de cálculo para prioridade CSS são as seguintes:
Exemplo de código-fonte
[www.downcodes.com] * O estilo definido na página, adicione 1,0,0,0
* Para cada seletor de ID (como #id), adicione 0,1,0,0
* Adicione 0,0,1,0 a cada seletor de classe (como .class), cada seletor de atributo (como [attribute=]) e cada pseudoclasse (como :hover)
* Para cada seletor de elemento (como p) ou seletor de pseudoelemento (como :firstchild), etc., adicione 0,0,0,1
Em seguida, adicione esses quatro números separadamente para obter o valor de cada prioridade definida pelo CSS.
Em seguida, compare o tamanho pouco a pouco, da esquerda para a direita. O estilo CSS com o número maior terá maior prioridade.
exemplo:
arquivo css ou <style> definido da seguinte forma:
Exemplo de código-fonte
[www.downcodes.com] 1. h1 {cor: vermelho;}
/* Um seletor de elemento, o resultado é 0,0,0,1 */
2. corpo h1 {cor: verde;}
/* Dois seletores de elementos, o resultado é 0,0,0,2 */
3. h2.grape {cor: roxo;}
/* Um seletor de elemento e um seletor de classe, o resultado é 0,0,1,1*/
4. li#answer {cor: azul marinho;}
/* Um seletor de elemento, um seletor de ID, o resultado é 0,1,0,1 */
O atributo de estilo do elemento é definido da seguinte forma:
Exemplo de código-fonte
[www.downcodes.com] h1 {cor: azul;}
/* Definido na página, um seletor de elemento, o resultado é 1,0,0,1*/
Nota: Todos os números estão sobrepostos aqui, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
Desde então, a cor do elemento h1 é azul.
Perceber:
1. O estilo declarado por !important tem a prioridade mais alta. Se houver conflito, ele será calculado novamente.
2. Se as prioridades forem iguais, selecione o estilo que aparece por último.
3. O estilo herdado tem a prioridade mais baixa.
