为什么要使用!important

在CSS中，’!important’是一个关键字，我们与CSS属性的值一起使用它。当我们在CSS属性值中使用’!important’时，浏览器会优先考虑该属性值，而不是同一元素上的其他属性值。

以下是一些需要在CSS属性值中使用’!important’的用例。

在内容管理系统（CMS）中，我们无法编辑网页的CSS。因此，如果我们向网页添加额外的CSS，它无法应用于特定元素；但是，如果我们在CSS中使用’!important’，我们可以覆盖特定CSS属性的初始值。
无论是在ReactJS、Svelte等Web框架中使用任何UI库，有时我们无法编辑UI组件的CSS。在这种情况下，我们可以使用’!important’与CSS属性一起，以覆盖它们的值。
实时应用程序中包含大量的CSS文件。有时，由于未知的覆盖，CSS不会影响元素。在这种情况下，我们可以使用’!important’来覆盖特定元素上特定属性的所有值。

语法

用户可以按照以下语法来使用’!important’与CSS属性值一起使用。

CSS-property: value !important

在上述的语法中，CSS属性可以是任何CSS属性，如margin，padding，padding-left，font-size等，而值则是CSS属性的所需要的值。

示例1

在下面的示例中，我们创建了三个class名为‘black’，‘grey’和‘red’的div元素。在CSS中，我们根据class名给div元素设置了背景颜色。

另外，我们使用‘!important’关键字将‘background-color: pink’ CSS属性应用到了所有的div元素上。在输出中，用户可以观察到所有div的背景颜色都变成了粉色，因为我们使用了‘!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>

示例2

在下面的示例中，我们创建了两个不同的段落。一个段落包含’class=”one”‘，另一个包含’class=”two”‘。我们对所有的<p>元素应用了一些CSS样式。

为了覆盖掉含有’class=”one”‘的元素的CSS样式，我们使用了’!important’关键字来覆盖应用在'<p>'元素上的样式。从输出中，用户可以观察到第一个段落具有不同的样式。

<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>

示例3

我们将通过下面的示例学习如何通过使用另一个”!important”来覆盖”!important”。我们创建了三个带有”initial”、”middle”和”final”类名的div元素。

我们使用了”!important”和background-color CSS属性，将其应用于div元素。因此，最初，所有div元素的背景都是水绿色。然后，我们又在应用于”middle”和”final”类名的元素时，再次使用了”!important”和background-color CSS属性。

在输出中，用户可以观察到蓝色和浅橙色会覆盖水绿色。

<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>