¿Qué significa! Importante en CSS?

Posible duplicado:
¿Cuáles son las implicaciones de usar “! Important” en CSS?
¿Cómo se lee? ¿Importante en CSS?

¿Qué significa !important en CSS?
¿Es para css2, css3, IE solamente?

Significa, esencialmente, lo que dice; que ‘esto es importante, ignore las reglas subsiguientes y cualquier problema de especificidad habitual, ¡aplique esta regla!’

En el uso normal, una regla definida en una hoja de estilo externa es anulada por un estilo definido en el head del documento, que, a su vez, es anulado por un estilo en línea dentro del elemento mismo (suponiendo la misma especificidad de los selectores). Definir una regla con el “atributo” !important (?) Descarta las preocupaciones normales con respecto a la regla “posterior” que anula a las “anteriores”.

Además, por lo general, una regla más específica anulará una regla menos específica. Asi que:

 a { /* css */ } 

Normalmente es invalidado por:

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

Como este último selector es más específico (y normalmente no importa dónde se encuentre el selector más específico (en el head o en la hoja de estilo externa), seguirá anulando el selector menos específico (los atributos de estilo en línea siempre anule el selector específico ‘más-‘ o ‘menos’, ya que siempre es más específico.

Sin embargo, si agrega !important a la statement CSS del selector menos específico, tendrá prioridad.

Usar !important tiene sus propósitos (aunque me cuesta pensar en ellos), pero es muy parecido a usar una explosión nuclear para evitar que los zorros maten a tus pollos; sí, los zorros serán asesinados, pero también lo harán los pollos. Y el vecindario.

También hace que depurar tu CSS sea una pesadilla (desde una experiencia personal, empírica).

La regla! Importante es una forma de hacer que su cascada de CSS, pero también tenga siempre aplicadas las reglas que considere más importantes. Una regla que tenga la propiedad! Importante siempre se aplicará independientemente de dónde aparezca esa regla en el documento CSS.

Entonces, si tienes lo siguiente:

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

la regla con la importante será la aplicada (sin contar la especificidad )

¡Creo !important apareció en CSS1, por lo que todos los navegadores lo admiten (IE4 a IE6 con una implementación parcial, IE7 + completo)

Además, es algo que no desea usar con bastante frecuencia, porque si está trabajando con otras personas puede anular otras propiedades.

!important es parte de CSS1.

Navegadores compatibles: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Significa algo así como:

Úsame, si no hay nada más importante a tu alrededor.

No puedo decirlo mejor.

Se usa para influir en la ordenación en la cascada de CSS cuando se realiza la clasificación por origen. No tiene nada que ver con la especificidad como se indica aquí en otras respuestas.

Aquí está la prioridad de menor a mayor:

  1. estilos de navegador
  2. declaraciones de hoja de estilo de usuario (sin! importante)
  3. declaraciones de hojas de estilo del autor (sin! importante)
  4. ! importantes hojas de estilo de autor
  5. ! hojas de estilo de usuario importantes

Después de esa especificidad, las reglas siguen teniendo un dedo en el pastel.

Referencias

Cambia las reglas para anular la prioridad de las cascadas css. Ver la especificación CSS2 .