Règle !important CSS

Qu'est-ce que !important ?

Dans CSS !important La règle est utilisée pour accorder une priorité supérieure à une propriété/valeur par rapport aux styles normaux.

En fait, si vous avez utilisé !important La règle, elle couvrira toutes les règles précédentes pour cette propriété spécifique de l'élément !

Laissez-nous voir un exemple :

Exemple

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

Essayez-le vous-même

Explication d'exemple

Dans cet exemple, les trois paragraphes recevront une couleur de fond rouge, bien que le sélecteur d'ID et de classe ait une spécificité plus élevée.!important Les règles couvrent ces deux cas pour la propriété background-color.

Importance de !important

Couverture !important La seule méthode pour couvrir les règles est d'inclure une autre déclaration ayant la même (ou une plus grande) spécificité dans le code source. !important Les règles - voici le début du problème ! Cela rend le code CSS désordonné et le débogage difficile, surtout si vous avez de grands tableaux de styles !

Dans cet exemple, nous créons une instance simple. Lorsque vous regardez le code source CSS, il n'est pas clair quelle couleur est considérée comme la plus importante :

Exemple

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

Essayez-le vous-même

Astuce :Comprendre !important Les règles sont bonnes. Vous pourriez le voir dans certains codes source CSS. Mais, à moins que vous ne soyez absolument obligé de l'utiliser, n'utilisez pas cela.

Il peut y avoir une ou deux utilisations légitimes de !important

Une autre utilisation !important La situation est que si vous devez surcharger un style que vous ne pouvez pas surcharger de manière autre, c'est peut-être parce que vous utilisez un gestionnaire de contenu (CMS) et que vous ne pouvez pas éditer le code CSS. Dans ce cas, vous pouvez définir certains styles personnalisés pour surcharger certains styles CMS.

Une autre utilisation !important La situation est la suivante : supposez que vous souhaitez que tous les boutons de la page aient une apparence spéciale. Ici, le style du bouton est de couleur de fond grise, texte blanc ainsi qu'un certain padding et une bordure :

Exemple

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

Essayez-le vous-même

Si nous plaçons le bouton dans un autre élément ayant une spécificité plus élevée, l'apparence du bouton peut parfois changer et les propriétés peuvent entrer en conflit. Voici un exemple :

Exemple

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

Essayez-le vous-même

Pour «forcer» que tous les boutons aient le même aspect à tout moment, nous pouvons utiliser !important Ajoutez les règles aux attributs du bouton, comme indiqué ci-dessous :

Exemple

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

Essayez-le vous-même