Regla !important de CSS

¿Qué es !important?

En CSS !important La regla se usa para dar prioridad a la propiedad/valor por encima de los estilos normales.

En realidad, si usaste !important La regla, que cubrirá todas las reglas de estilo anteriores para la propiedad específica del elemento!

Veamos un ejemplo:

Ejemplo

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Prueba personalmente

Ejemplo de explicación

En el ejemplo anterior, todos los tres párrafos obtendrán un color de fondo rojo, a pesar de que el selector de ID y el selector de clase tienen una especificidad mayor.!important Las reglas cubren ambas situaciones para la propiedad background-color.

Importancia de !important

Cubrir !important La única manera de cubrir las reglas es incluyendo otra declaración con la misma (o mayor) especificidad en el código fuente !important Las reglas - ¡esto es el inicio del problema! Esto hace que el código CSS se vuelva caótico y la depuración se vuelva difícil, especialmente si tienes tablas de estilos grandes!

Aquí creamos un ejemplo simple. Al ver el código fuente CSS, no es del todo claro qué color se considera el más importante:

Ejemplo

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Prueba personalmente

Consejo:Conocer !important Las reglas son buenas. Puede que veas en el código fuente de CSS. Pero, a menos que sea absolutamente necesario, no lo uses.

Puede haber una o dos situaciones razonables para usar !important

Una forma de usar !important La situación es, si debes sobrescribir estilos que no puedes cubrir de otra manera. Esto puede ser porque estás utilizando un sistema de gestión de contenido (CMS) y no puedes editar el código CSS. Luego puedes establecer algunos estilos personalizados para cubrir ciertos estilos del CMS.

Otra forma de usar !important La situación es: supongamos que deseas que todos los botones en la página tengan un aspecto especial. Aquí, el estilo del botón es de color de fondo gris, texto en blanco y algunos márgenes internos y bordes:

Ejemplo

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Prueba personalmente

Si colocamos el botón en otro elemento con mayor especificidad, a veces el aspecto del botón cambia y ocurren conflictos en las propiedades. Aquí hay un ejemplo:

Ejemplo

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Prueba personalmente

Para “forzar” que todos los botones tengan el mismo aspecto en cualquier momento, podemos usar !important Añada las reglas al atributo del botón, como se muestra a continuación:

Ejemplo

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Prueba personalmente