Con respecto al uso de !important
podemos consultar la definición de la W3C que dice y cito:
CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).
However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
Que se pudiera traducir como
CSS intenta crear un balance de poder entre las hojas de estilo
del autor y del usuario. Por defecto, las reglas en la hoja de estilos
del autor sobre escribe aquellas en la hoja de estilos del usuario
Sin embargo, por balance, una declaración de !important
(el token
delimitador "!" y la palabra clave "important" sigue a la declaración)
toma precedencia sobre una declaración normal. Ambas hojas de estilo autor y
usuario pueden contener declaraciones "!important" y las reglas de "!important"
del usuario sobre escriben a las reglas "!important" del autor. Esta característica
de CSS mejora la accesibilidad de los documentos brindando a los usuarios con
necesidades especiales(fuentes amplias, combinaciones de color, etc) control sobre
presentación
Entonces partimos de que los estilos se aplican en cascada, es decir de arriba hacia abajo según son declarados
Ejemplo 1.
Declaro una etiqueta párrafo que será de color azul el texto por que en el CSS mi segunda declaración establece dicho color aunque tengo otra que lo debería poner rojo al inicio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo</title>
<style>
p{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
</body>
</html>
Ejemplo 2.
Sin embargo ahora haciendo uso de la regla !important
sobre escribiré la regla anterior, indicando que tome la primer regla CSS para poner el texto en rojo a pesar de que debería tomar el azul pues en la declaración es la última regla CSS escrita
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
p{
color: red !important;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
</body>
</html>
Ejemplo 3.
Sin embargo veamos ahora lo siguiente, declaro para la misma etiqueta 4 colores de texto distintos; en este orden:
- con
!important
- sin
!important
- con
!important
- con
!important
Aunque pudieramos pensar que debería tomar el primero pues se le esta indicando que sobre escriba al resto de estilos, el texto finalmente tendrá el color de la última regla; por que inicia a leer las reglas y aplica la primera por la regla ya mencionada, posterior lee la segunda pero no la aplica por la importancia de la anterior, sigue leyendo y aplica la tercera pues nuevamente tiene la regla de importancia y termina leyendo la última regla que es la que sobre escribirá y quedará al final pues aunque es la última tiene la regla de !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo</title>
<style>
p{
color: red !important;
}
p{
color: blue;
}
p{
color: green !important;
}
p{
color: steelblue !important;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique esse ratione quae cupiditate eligendi maxime excepturi animi velit, quos vel exercitationem est soluta tenetur ex labore consequuntur assumenda! Quae, asperiores!</p>
</body>
</html>
Referencia