Qual é a ordem de precedência para CSS?
A propriedade com maior precedência é executada antes daquele com menor precedência. Portanto, há uma lista na qual as propriedades do CSS são classificadas com base em sua precedência.
Propriedades do CSS classificadas da maior a mais baixa precedência
A precedência dos elementos CSS de maior a mais baixa classificação é a seguinte:
- O !propriedade importante
- Propriedade CSS definida diretamente no elemento
- Seletores combinados
- Seletor de identificação
- Seletor de classe
- Seletor de atributo
- Seletor de elementos
- *
- Estilos herdados
Uma breve descrição de cada propriedade
Vamos discutir essas propriedades e elementos do CSS em detalhes na ordem de sua precedência.
O !regra importante
Há um "!importante”Regra no CSS que, se existir, é executado antes de todas as outras propriedades do CSS. Ele declara uma propriedade específica como a da maior precedência ou instrui o compilador a priorizar uma determinada propriedade enquanto executa o código. A propriedade que contém o “!importante”A regra terá a maior precedência entre todas as outras regras.
A propriedade que tem o “!importante”A regra domina sobre as outras propriedades. De fato, o “!importante”Regra substitui a importância das outras propriedades.
Vamos escrever um trecho de código para entender o impacto disso “!importante”Regra em um documento. Aqui está um trecho de código HTML que insere três frases simples na saída:
Esta é a linha 1
Esta é a linha 2
Esta é a linha 3
Adicionamos três propriedades do estilo CSS para definir diferentes cores de fundo para cada uma:
.myClass Background-Color: Red;#MYID Background-Color: Green;
P Background-Color: Amarelo !importante;
O snippet de código parece definir as três cores de fundo diferentes para cada um, mas o “!importante”A regra inserida para a propriedade que define a cor do plano de fundo que o amarelo domina todas as outras propriedades e a interface de saída será a seguinte:
No entanto, às vezes o “!importante”A propriedade não funciona corretamente por causa de múltiplos“!importante”Regras para o mesmo tipo de propriedade.
As propriedades do CSS são executadas com base em sua precedência. Depois de "!importanteRegra, todas as propriedades são executadas de acordo com sua precedência declarada.
Propriedade CSS definida diretamente no elemento
Quando existe uma propriedade CSS que é definida diretamente em um elemento no elemento do estilo CSS, ela terá a maior precedência em comparação com todas as outras propriedades.
Seletores combinados
Eles têm menos especificidade e importância do que os seletores de elementos diretos, mas maior especificidade do que outras propriedades i.seletor de identificação, seletor de classe e seletor de atributos.
Seletor de identificação
Possui maior especificidade do que os seletores de classe e atributo e seletores inferiores que combinados.
Seletor de classe
Tem menor precedência que o seletor de identificação e maior precedência do que algumas outras propriedades, como atributo e seletor de elementos.
Seletor de atributo
Um atributo tem precedência maior que o seletor de elementos e menor precedência do que o seletor de classe.
Seletor de elementos
Seletores de elementos têm precedência menor que os seletores de atributo, classe e ID.
O seletor All ( *)
Tem a menor precedência entre todos os seletores do elemento de estilo CSS.
Estilos herdados
Como os estilos herdados se referem aos pais e não ao próprio elemento direcionado exato, ele tem a menor precedência na lista de todas as propriedades de estilo no CSS.
Explicado acima está a lista da ordem de precedência dos elementos do estilo CSS.
Conclusão
Como todos os outros idiomas de codificação, o CSS também tem uma ordem de precedência, segundo a qual as operações são realizadas. Ao adicionar propriedades do CSS em qualquer documento, o navegador deve limpar o conflito de qual propriedade deve ser executada diante da outra e qual propriedade substitui completamente as outras propriedades. Portanto, o navegador precisa executar o código de acordo com a ordem de precedência do CSS.