CSS Règle !important

Qu'est-ce que !important

La règle !important en CSS est utilisée pour augmenter le poids d'un style.

!importantIndépendamment de la priorité, cela est directement lié au résultat final. Lorsqu'une règle !important est utilisée, cette déclaration écrasera toute autre déclaration.

Exemple

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

Essayez-le vous-même »

Dans l'exemple ci-dessus, bien que les sélecteurs d'ID et les sélecteurs de classe aient une priorité plus élevée, la couleur d'arrière-plan des trois paragraphes s'affiche en rouge, car la règle !important écrase la propriété background-color.

Remarques importantes

L'utilisation de !important est une mauvaise habitude et doit être évitée autant que possible, car elle brise les règles de cascade inhérentes à la feuille de style, ce qui rend le débogage et la recherche de bogues beaucoup plus difficiles.

Lorsque deux déclarations conflictuelles avec des règles !important sont appliquées au même élément, la déclaration avec la priorité la plus élevée sera adoptée.

Dans l'exemple suivant, lorsqu'on examine le code source CSS, il n'est pas très clair quelle couleur est la plus importante :

Exemple

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

Essayez-le vous-même »

Suggestions d'utilisation :

  • AbsolumentPrivilégiez l'utilisation de la priorité des règles de style pour résoudre les problèmes plutôt que!important
  • UniquementUtilisez-le sur des pages spécifiques où vous devez surcharger le CSS global du site ou un CSS externe.!important
  • Ne jamaisl'utiliser dans votre plugin!important
  • Ne jamaisl'utiliser dans le code CSS global du site.!important

Quand utiliser !important

Si vous souhaitez définir un style global sur votre site web, vous pouvez utiliser !important.

Par exemple, si nous voulons que tous les boutons du site web aient le même style :

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 avec une priorité plus élevée, l'apparence du bouton changera et les propriétés entreront en conflit, comme dans l'exemple suivant :

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 »

Si vous voulez que tous les boutons aient la même apparence, nous pouvons ajouter la règle !important à la propriété de style 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 »
autres extensions