O que! Important significa em CSS?

O que !importantsignifica em CSS?

Está disponível no CSS 2? CSS 3?

Onde é suportado? Todos os navegadores modernos?

Significa, essencialmente, o que diz; que 'isso é importante, ignore as regras subseqüentes e quaisquer problemas de especificidade comuns, aplique esta regra!'

No uso normal, uma regra definida em uma folha de estilo externa é substituída por um estilo definido no headdocumento, que, por sua vez, é substituído por um estilo em linha dentro do próprio elemento (assumindo a mesma especificidade dos seletores). Definir uma regra com o !important'atributo' (?) Descarta as preocupações normais no que diz respeito à regra 'posterior' substituindo as 'anteriores'.

Além disso, normalmente, uma regra mais específica substituirá uma regra menos específica. Assim:

a {
    /* css */
}

Normalmente é substituído por:

body div #elementID ul li a {
    /* css */
}

Como o último seletor é mais específico (e normalmente não importa onde o seletor mais específico é encontrado (na headfolha de estilo ou na externa)), ele ainda substituirá o seletor menos específico (os atributos de estilo em linha sempre serão substitua o seletor específico 'more-' ou 'less-', pois é sempre mais específico.

Se, no entanto, você adicionar !importantà declaração CSS do seletor menos específico, ela terá prioridade.

O uso !importanttem seus propósitos (embora eu tenha dificuldade em pensar neles), mas é como usar uma explosão nuclear para impedir que as raposas matem suas galinhas; sim, as raposas serão mortas, mas as galinhas também. E a vizinhança.

Isso também torna a depuração do CSS um pesadelo (por experiência pessoal, empírica).

A regra! Important é uma maneira de fazer com que seu CSS seja cascateado, mas também tenha sempre as regras que você considera mais cruciais. Uma regra que possua a propriedade! Important sempre será aplicada, independentemente de onde ela apareça no documento CSS.

Então, se você tem o seguinte:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

a regra com o importante será a aplicada (sem contar a especificidade )

Eu acredito que !importantapareceu no CSS1, então todo navegador suporta (IE4 a IE6 com uma implementação parcial, IE7 + completo)

Além disso, é algo que você não deseja usar com bastante frequência, porque se estiver trabalhando com outras pessoas, poderá substituir outras propriedades.

!important faz parte do CSS1.

Navegadores compatíveis: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Significa algo como:

Use-me, se não houver mais nada importante por perto!

Não posso dizer melhor.

É usado para influenciar a classificação na cascata CSS quando a classificação por origem é feita. Não tem nada a ver com especificidade, como indicado aqui em outras respostas.

Aqui está a prioridade do menor para o maior:

1. estilos de navegador
2. declarações de folha de estilo do usuário (sem! importante)
3. declarações da folha de estilos dos autores (sem! important)
4. folhas de estilo importantes do autor
5. ! folhas de estilo importantes para o usuário

Depois que essa especificidade ocorre, as regras ainda têm um dedo na torta.

Referências:

• http://www.w3.org/TR/CSS2/cascade.html#cascade
• https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html

Ele altera as regras para substituir a prioridade das cascatas de css. Veja a especificação CSS2 .