2012-02-12 36 views
269

Duplicar posible:
What are the implications of using “!important” in CSS?
How do you read !important in CSS?¿Qué significa! Importante en CSS?

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

+2

http://www.w3.org/TR/CSS2/cascade.html#important-rules – j08691

+9

... algo para evitar cuando sea posible. – Scott

+2

posible duplicado de [¿Cómo se lee! ¿Importante en CSS?] (Http://stackoverflow.com/questions/7369216/how-do-you-read-important-in-css), [¿Cuáles son las implicaciones de usar "! Important" en CSS?] (Http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) y también ver: [cuándo usar! Propiedad importante en css?] (http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css), [Cuándo usar "! important" para guardar el día (cuando se trabaja con CSS) ] (http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css) –

Respuesta

275

Significa, esencialmente, lo que dice; que 'esto es importante, ignore las reglas posteriores y cualquier problema de especificidad habitual, aplique esta regla'

En 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 igual especificidad del selectores). La definición de una regla con el !important 'atributo' (?) Descarta las preocupaciones normales con respecto a la regla 'posterior' que anula las 'anteriores'.

También, generalmente, una regla más específica anulará una regla menos específica. Por lo tanto:

a { 
    /* css */ 
} 

normalmente es revocada por:

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

Como este último selector es más específica (y no lo hace, normalmente, independientemente de dónde se encuentre el selector más específico (en el head o la hoja de estilo externa) todavía anula el selector menos específico (los atributos de estilo en línea serán siempre anulan el selector 'más' o el selector 'menos', ya que es siempre más específico.

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

El uso de !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 su CSS sea una pesadilla (desde el personal, empírico, experiencia).

+145

También es confuso para muchos desarrolladores como en muchos programas idiomas el prefijo! significa * no *. – rustyx

+8

Un propósito para! Important sería en una secuencia de comandos de GreaseMonkey en la que está sobrescribiendo deliberadamente el CSS de otras personas que probablemente sea más específico que el suyo. – Noumenon

+0

Oficialmente, el W3 [lo llama] (http://www.w3.org/TR/CSS2/cascade.html#important-rules) una "regla". –

18

!important es una parte de CSS1.

Navegadores que lo soportan: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Es decir, algo así como:

uso de mí, si no hay nada importante más alrededor!

No puedo decirlo mejor.

+4

'! Important' no está limitado solo a Safari 3+; lo ha apoyado desde el principio como todos los demás navegadores que no sean IE. IE lo entiende desde la versión 4 en adelante, pero solo lo admite sin errores a partir de la versión 7. – BoltClock

5

Cambia las reglas para anular la prioridad de las cascadas css. Ver the CSS2 spec.

85

El! Regla importante es una manera de hacer que su cascada CSS, pero también tienen las normas que considere más crucial se aplique siempre. Una regla que tiene ! La propiedad importante siempre se aplicará sin importar dónde aparezca esa regla en el documento CSS.

lo tanto, si usted tiene la siguiente:

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

la regla con el importante será que se aplica (sin contar specificity)

Creo !important apareció en CSS1 por lo que cada navegador es compatible (IE4 a IE6 con una implementación parcial, IE7 + lleno)

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

+1

IE4 +, en realidad, con errores, hasta e incluyendo 6. – BoltClock

+12

La confusión ocurre cuando '!' Es un símbolo para NOT en algunos idiomas pero está más claro ahora. – Si8

+2

Me complace especialmente que haya incluido la sintaxis para usar '! Important'. CSS es lo suficientemente diferente de otros idiomas que es fácil olvidarse de cómo usar ciertas cosas. – blainarmstrong

9

Se utiliza 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í es la prioridad de menor a mayor: (sin importancia)

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

Después de se produce esa especificidad para las reglas que aún tienen un dedo en el pie.

Referencias:

+2

secifity => especificidad? –