Como aplicar !importante usando CSS

Existe uma regra usada com CSS para acrescentar importância a uma propriedade CSS específica e é chamada de “!importante" regra. Quando um “!importanteA regra existe no código no elemento de estilo CSS, domina todas as outras propriedades, priorizando a compilação dessa propriedade e substitui o efeito de todas as outras propriedades nesse elemento.

O "!importante”Regra no CSS tem a maior precedência entre todas as propriedades declaradas, todas as outras propriedades executadas depois disso. No entanto, o "!importante”A regra pode não funcionar corretamente às vezes quando é usada em vários lugares no mesmo elemento.

Aplicando !regra importante

Vamos escrever um código de exemplo para entender o impacto da regra importante no estilo de um documento HTML:

Esta é a primeira frase

Esta é a segunda frase

Esta é a terceira frase

Aplicando !Regra importante para uma propriedade

• Adicione o "!importante”Regra em uma das propriedades simplesmente escrevendo“importante”Com um ponto de exclamação no lado direito da propriedade.
• Não deve haver semicolon entre a propriedade e o “!importante”Regra porque um semicolon sempre termina uma declaração. Então, o semicolon deve ser colocado após escrever “!importante”.

Um exemplo simples para adicionar a regra importante a uma propriedade CSS é:

.myClass Background-Color: Blue;
#MYID Background-Color: Green;
P Background-Color: Orange !importante;

No trecho de código acima, há “!importante”Escrito com uma propriedade que define a cor de fundo“laranja”. Esta propriedade substituirá as propriedades que definem as cores de fundo como verde e azul e definirá a cor do fundo de todas as frases na saída como laranja.

Isso gerará a seguinte interface de saída:

Sem o !regra importante
Agora, se removermos a regra importante, o resultado será completamente diferente, pois todas as propriedades funcionarão sem se substituir:

.myClass Background-Color: Blue;
#MYID Background-Color: Green;
P Background-Color: Orange;

Ele definirá as cores de fundo como azul, verde e laranja com a sequência, conforme a especificada através do snippet de código HTML. O resultado gerado por isso será o seguinte:

Isso resume o método para aplicar a regra importante usando CSS.

Conclusão

O CSS “!importante”A regra acrescenta mais importância a uma propriedade, pois prioriza a propriedade e substitui todas as outras propriedades especificadas para um elemento. O "!importante”A regra é aplicada a uma propriedade CSS simplesmente digitando“importante" com um "!”(Marco de Exclamação) Após a propriedade CSS antes do Semicolon. Este artigo explicou bem como aplicar o !Regra importante usando CSS.