¿Qué significa! Importante en CSS?
¿Qué !importantsignifica en CSS?
¿Está disponible en CSS 2? ¿CSS 3?
¿Dónde se apoya? ¿Todos los navegadores modernos?
Significa, esencialmente, lo que dice; que 'esto es importante, ignore las reglas posteriores y cualquier problema de especificidad habitual, ¡aplica esta regla!'
En el uso normal, una regla definida en una hoja de estilo externa es anulada por un estilo definido en headel documento, que, a su vez, es anulado por un estilo en línea dentro del propio elemento (asumiendo la misma especificidad de los selectores). Definir una regla con el !important'atributo' (?) descarta las preocupaciones normales con respecto a que la regla 'posterior' prevalezca sobre las 'anteriores'.
Además, normalmente, una regla más específica anulará una regla menos específica. Entonces:
a {
/* css */
}
Normalmente es anulado por:
body div #elementID ul li a {
/* css */
}
Como el último selector es más específico (y normalmente no importa dónde se encuentre el selector más específico (en la headhoja de estilo externa o en la hoja de estilo), aún anulará 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 !importanta la declaración CSS del selector menos específico, tendrá prioridad.
Usar !importanttiene 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 gallinas; Sí, matarán a los zorros, pero también a las gallinas. Y el barrio.
También hace que la depuración de su CSS sea una pesadilla (desde la experiencia personal, empírica).
La regla !important es una forma de hacer que su CSS funcione en cascada, pero también de aplicar siempre las reglas que considere más cruciales. Una regla que tenga la propiedad importante siempre se aplicará sin importar 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 lo importante será la que se aplique (sin contar la especificidad )
Creo !importantque apareció en CSS1, por lo que todos los navegadores lo admiten (IE4 a IE6 con una implementación parcial, IE7+ completa)
Además, es algo que no desea utilizar con mucha frecuencia, porque si trabaja con otras personas puede anular otras propiedades.
!importantes parte de CSS1.
Navegadores que lo admiten: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Significa algo como:
¡Úsame, si no hay nada más importante alrededor!
No puedo decirlo mejor.
Se utiliza para influir en la clasificación en la cascada 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:
- estilos de navegador
- declaraciones de hojas de estilo de usuario (sin !importante)
- declaraciones de hoja de estilo del autor (sin !importante)
- !hojas de estilo de autor importantes
- !hojas de estilo de usuario importantes
Después de eso, la especificidad tiene lugar para las reglas que todavía tienen un dedo en el pastel.
Referencias:
- http://www.w3.org/TR/CSS2/cascade.html#cascade
- https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html
