Maison > Article > interface Web > Pourquoi devrions-nous utiliser !important ?

Pourquoi devrions-nous utiliser !important ?

王林avant: 2023-08-23 21:45:021082parcourir

En CSS, '!important' est un mot-clé que nous utilisons avec les valeurs des propriétés CSS. Lorsque nous utilisons le « !important » avec la valeur de la propriété CSS, le navigateur donne plus d'importance à cette valeur de propriété par rapport aux autres valeurs de propriété sur le même élément.

Voici quelques cas d'utilisation dans lesquels nous devons utiliser le « !important » avec les valeurs de la propriété CSS.

Dans le système de gestion de contenu (CMS), nous ne pouvons pas modifier le CSS de la page Web. Ainsi, si nous ajoutons du CSS supplémentaire à la page Web, il ne peut pas être appliqué à l'élément spécifique, mais si nous utilisons « ! Important » avec CSS, nous pouvons remplacer les valeurs initiales de propriétés CSS particulières.
Chaque fois que nous utilisons une bibliothèque d'interface utilisateur dans des frameworks Web tels que ReactJS, Svelte, etc., nous ne pouvons parfois pas modifier le CSS du composant d'interface utilisateur. Dans de tels cas, nous pouvons utiliser le « !important » avec les propriétés CSS pour remplacer leurs valeurs.
L'application en temps réel contient de gros fichiers CSS. Parfois, CSS n’affecte pas l’élément en raison d’une substitution inconnue. Dans ce cas, nous pouvons utiliser « !important » pour remplacer toutes les valeurs d'une propriété particulière sur un élément particulier.

Syntaxe

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour utiliser le « !important » avec les valeurs de la propriété CSS.

CSS-property: value !important

Dans la syntaxe ci-dessus, la propriété CSS peut être n'importe quelle propriété CSS telle que margin, padding, padding-left, font-size, etc., et la valeur doit être respectée pour la propriété CSS.

Exemple

Dans l'exemple ci-dessous, nous avons créé trois éléments div avec les noms de classe « noir », « gris » et « rouge ». En CSS, nous avons donné la couleur d'arrière-plan à l'élément div en fonction des noms de classe.

De plus, nous avons appliqué la propriété CSS « background-color : pink » à tous les éléments div avec le mot-clé « !important ». Dans le résultat, les utilisateurs peuvent observer que la couleur d’arrière-plan de tous les div devient rose car nous avons utilisé le « !important ».

<html>
<head>
   <style>
      .black {background-color: black;}
      .grey {background-color: grey;}
      .red {background-color: red;}
      div {
         background-color: pink !important;
         margin: 5px;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "black">
      This is a black div.
   </div>
   <div class = "grey">
      This is a grey div.
   </div>
   <div class = "red">
      This is a red div.
   </div>
</body>
</html>

Exemple

Dans l'exemple ci-dessous, nous avons créé deux paragraphes différents. Un paragraphe contient le nom de classe « un » et un autre contient le « deux » comme nom de classe. Nous avons appliqué du CSS à tous les

éléments.

Pour remplacer le CSS d'un élément avec le nom de classe « one », nous avons utilisé le mot-clé « !important » pour remplacer le style appliqué sur l'élément «

». Dans le résultat, les utilisateurs peuvent observer que le premier paragraphe a des styles différents.

<html>
<head>
   <style>
      p {
         padding: 20px;
         background-color: #f1f1f1;
         border: 1px solid #ccc;
         border-radius: 5px;
      }
      .one {
         background-color: green !important;
         border: 5px dotted blue !important;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <p class = "one"> This is a paragraph. </p>
   <p class = "two"> This is another paragraph. </p>
</body>
</html>

Exemple

Nous apprendrons à remplacer le '!important' en utilisant un autre '!important' via l'exemple donné ci-dessous. Nous avons créé les trois éléments div avec les noms de classe « initial », « middle » et « final ».

Nous avons utilisé le '!important' avec la propriété CSS background-color, que nous appliquons aux éléments div. Ainsi, au départ, l’arrière-plan de tous les éléments div est aqua. Après cela, nous avons de nouveau utilisé le « !important » avec la propriété CSS background-color tout en l'appliquant aux éléments portant les noms de classe « middle » et « final ».

Dans le résultat, les utilisateurs peuvent observer que les couleurs bleu et saumon clair remplacent la couleur « aqua ».

<html>
<head>
   <style>
      div {
         background-color: aqua !important;
         margin: 10px;
         padding: 5px;
      }
      .middle {background-color: blue !important;}
      .final {background-color: lightsalmon !important;}
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "initial">
      This is an initial Div element.
   </div>
   <div class = "middle">
      This is a middle Div element.
   </div>
   <div class = "final">
      This is a final Div element.
   </div>
</body>
</html>

Conclusion

Les utilisateurs ont appris à utiliser le « !important » en CSS. Fondamentalement, nous devrions éviter d’abuser du « !important » ; sinon, cela peut devenir un casse-tête pour quiconque de résoudre de nombreux « ! Important » car cela remplace le CSS de l'élément.

Cependant, les utilisateurs peuvent utiliser « !important » lors de la mise à jour du CSS du système de gestion de contenu de n'importe quelle bibliothèque ou d'un composant de l'interface utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utilisez CSS pour obtenir un effet d'animation pop-up à droiteArticle suivant：Utilisez CSS pour obtenir un effet d'animation pop-up à droite

Articles Liés

Voir plus