!Regra importante no CSS explicou

As propriedades CSS são aplicadas em uma ordem que é definida usando o conceito de especificidade no CSS. No entanto, às vezes você pode precisar dar importância ao valor de uma propriedade CSS sobre os outros valores da mesma propriedade. Para isso, o !A palavra -chave importante é usada com uma propriedade CSS para torná -la mais proeminente do que outras propriedades. Este artigo demonstra o uso do !Regra importante no CSS.

Como !Regra importante funciona no CSS

Para entender o trabalho, você deve entender a sintaxe seguida por !regra importante.

O Seletor refere -se ao seletor de CSS sendo usado, enquanto o propriedade refere -se à propriedade CSS que está sendo aplicada com alguns valor. A colocação do !A palavra -chave importante também é importante e deve estar no final do valor da propriedade, como mostrado na sintaxe.

Como usar !Regra importante no CSS

Enquanto o !A regra importante não segue a especificidade; portanto, não importa onde o !A regra importante é aplicada, ela está apenas no nível mais alto de especificidade. Vamos ter alguns exemplos para obter uma imagem mais clara desse fenômeno.

Exemplo 1: Usando CSS externo, interno e embutido

Geralmente, o CSS embutido tem a maior prioridade seguida de CSS interno e externo. O código a seguir usa o !regra importante em uma folha de estilo externo para mostrar seu comportamento primordial.

Html

Bem -vindo ao Linuxhint!

No código acima, um

O elemento é usado com estilo embutido que pretende alterar a cor do fundo.

CSS externo

O código acima refere -se à folha de estilo externa que seria vinculada ao documento HTML. Observa-se que a propriedade cor de fundo tem um !importante governar com isso.

CSS interno

O código CSS acima foi usado como um CSS interno; Este CSS interno também tenta alterar a cor de fundo do

elemento.

Saída

Embora o inline tenha maior prioridade do que interno e externo. No entanto, usamos o !Palavra-chave importante com a propriedade cor de fundo em CSS externo. Portanto, a cor de fundo será buscada a partir do arquivo CSS externo, como pode ser visto na saída acima.

Exemplo 2: Usando vários seletores CSS

Aqui, os seletores CSS, como classe e id de um elemento, são usados. O !A regra importante é aplicada dentro da classe de um elemento.

Html

Bem -vindo ao Linuxhint!

No código acima, um parágrafo é criado com id = "para" e class = "cl".

CSS

O ".seletor de cl ”e o“#páraOs seletores de CSS tentam definir a cor de fundo do

elemento. Observe que o !importante A regra é aplicada ao “.Cl”Seletor .

Saída

Embora o seletor de identificação tenha uma prioridade mais alta que o seletor de classe, o !importante A regra substituirá a propriedade cor de fundo usada no id = ”pára”Seletor.

Conclusão

O !A regra importante é bastante útil em vários cenários complexos em que várias folhas de estilo externo e interno estão sendo usadas e você só deseja adicionar outra propriedade CSS com a maior prioridade. Mantendo o significado do !Regra importante em mente, este post fornece um guia detalhado sobre o trabalho e o uso do !Regra importante no CSS. O uso do !A regra importante é ilustrada, exercitando -a em vários seletores de CSS e observando que substitui a propriedade CSS relevante usada por outros seletores de CSS.