为什么要使用 !important?

cssweb developmentfront end technology更新于 2024/4/18 6:36:17

在 CSS 中，"!important" 是一个关键字，我们将其与 CSS 属性值一起使用。当我们将 "!important" 与 CSS 属性值一起使用时，浏览器会赋予该属性值比同一元素上的其他属性值更高的优先级。

以下是一些需要将 "!important" 与 CSS 属性值一起使用的用例。

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

语法

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

CSS-property: value !important

在上述语法中，CSS-property 可以是任何 CSS 属性，例如 margin、padding、padding-left、font-size 等，并且 value 应为 CSS 属性的值。

示例

在下面的示例中，我们创建了三个 div 元素，类名分别为"black"、"grey"和"red"。在 CSS 中，我们根据类名指定了 div 元素的背景颜色。

此外，我们还将 CSS 属性"background-color: pink"应用于所有带有"!important"关键字的 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>

示例

在下面的示例中，我们创建了两个不同的段落。一个段落包含类名"one"，另一个段落包含类名"two"。我们已将一些 CSS 应用于所有 <p> 元素。

为了覆盖类名为"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>

示例

我们将通过以下示例学习如何使用另一个"!important"来覆盖"!important"。我们创建了三个 div 元素，类名分别为"initial"、"middle"和"final"。

我们将"!important"与 background-color CSS 属性一起使用，并将其应用于 div 元素。因此，最初，所有 div 元素的背景都是浅绿色。之后，我们再次将"!important"与 background-color CSS 属性一起使用，并将其应用于类名为"middle"和"final"的元素。

在输出中，用户可以观察到蓝色和浅橙色覆盖了"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>