Regra !important do CSS

O que é !important?

No CSS !important Regra para dar prioridade ao atributo/valor acima do estilo normal.

Na verdade, se você usar !important Regra, que cobre todas as regras anteriores de estilo para o atributo específico do elemento!

Vamos ver um exemplo:

Exemplo

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Experimente pessoalmente

Exemplo de explicação

No exemplo acima, todos os três parágrafos obterão cor de fundo vermelha, apesar do seletor de ID e o seletor de classe terem maior especificidade.!important As regras cobrem essas duas situações para a propriedade background-color.

Importância do !important

Sobrescrever !important A única maneira de sobrescrever regras é incluir outra declaração com a mesma (ou maior) especificidade no código-fonte !important Regras - isso é o início do problema! Isso torna o código CSS confuso e a depuração se torna difícil, especialmente quando você tem uma tabela de estilos grande!

Aqui criamos um exemplo simples. Quando você olha para o código-fonte CSS, não é claro qual cor é considerada mais importante:

Exemplo

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Experimente pessoalmente

Dica:Entenda !important As regras são boas. Você pode vê-lo em alguns códigos-fonte CSS. Mas, a menos que você absolutamente precise usá-lo, não o faça.

Pode haver uma ou duas situações razoáveis para usar !important

Uma forma de usar !important A situação é, se você precisar sobrescrever estilos que não podem ser substituídos de outra forma. Isso pode ser porque você está usando um sistema de gerenciamento de conteúdo (CMS) e não pode editar o código CSS. Então, você pode definir alguns estilos personalizados para substituir alguns estilos do CMS.

Outra forma de usar !important A situação é: suponha que você deseje que todos os botões na página tenham uma aparência especial. Aqui, o estilo do botão é cor de fundo cinza, texto branco e algumas margens internas e bordas:

Exemplo

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Experimente pessoalmente

Se colocarmos o botão em um elemento com maior especificidade, a aparência do botão às vezes muda e ocorrem conflitos de atributos. Aqui está um exemplo:

Exemplo

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Experimente pessoalmente

Para 'forçar' que todos os botões tenham a mesma aparência em qualquer momento, podemos usar !important Adicione as regras conforme mostrado nos atributos do botão:

Exemplo

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Experimente pessoalmente