Para que serve a declaração !important
no CSS?
body {
font-size: 12.5px !important;
}
A declaração !important
serve para forçar o CSS a usar a propriedade descrita nessa linha.
O CSS funciona por hierarquias, uma cascata de regras que obedecem a prioridades. Por exemplo uma propriedade declarada num elemento diretamente no HTML têm prioridade em relação a uma propriedade defenida no CSS. Em casos destes, e em casos de ambiguidade em que duas regras são iguais ou competem, usando !important
faz essa regra onde ele está presente pervalecer.
Para ser mais específico aqui fica uma lista de prioridades, por ordem crescente (primeiro é menos importante), de como o CSS funciona. E mais uma vez, o !important
é a exceção que vence todos os casos:
Seletores universais, p.ex:
*{ }
Seletores de class, p.ex:.minhaClasse{ }
Seletor de atributo, p.ex:input[type="text"]{ }
Pseudo seletor, p.ex:div:hover{ }
Seletor de ID, p.ex#minhaID{ }
Nostyle
do HTML, p.ex:style="color: blue;"
Esta propriedade !important
é muito útil, mas é o mesmo que usar "força bruta". Por isso deve ser usada com precaução pois pode criar situações dificeis de fazer debug.
#div1 {
color: blue;
}
#div2 {
color: blue;
}
#div3 {
color: red !important;
}
body > div {
color: blue;
}
<div id="div1">Teste 1</div>
<div id="div2" style="color: green;">Teste 2</div>
<div id="div3" style="color: green;">Teste 3</div>
Repare que o !important
pervalece até no terceiro caso em que existem regras para esse elemento no CSS e no HTML.
A finalidade o !important
é sobrepor as Regras de precedência.
Exemplo do funcionamento:
HTML
<p id="a" class="azul">teste</p>
CSS
#a{ color: red;}
.azul{ color: blue !important;}
Sem o !important
ele deveria estar vermelho, pois o ID
é mais específico que uma classe, devido ao uso do mesmo, ele está em azul.
Você pode conhecer um pouco mais sobre especificidade e Regras de precedência dando uma olhada neste tutorial.