Css 简明教程

CSS - !important

在 CSS 中，符号 !important 是一个特殊方式，它用来赋予 CSS 声明优先权，使其优先于适用于同一选择器的其他竞争规则。该声明用于赋予 CSS 规则更高的特殊性和优先级，这意味着它会覆盖其他冲突的样式，即使这些样式具有更高的特殊性或在样式表中稍后定义。

  1. 感叹号 (!) 后跟单词 important （没有空格）告诉浏览器优先设置该样式高于其他所有样式。

  2. 此规则改变了浏览器选择遵循哪些规则的方式。不具备这种特殊关照的规则被称为正常规则。

  3. 至关重要的是， !important 是声明中的最后一个元素，紧在终止分号之前。在处理允许多个关键字的属性时，此位置尤为重要，例如 font 属性。

Syntax

selector {
   property: value !important;
}

CSS !important - Basic Example

以下示例演示了 !important 的使用，在此示例中，我们通过使用新样式重新定义 .box 类来覆盖基本样式：

<html>
<head>
<style>
    /* Base styles */
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 10px;
    }
    /* Override styles using !important */
    .box {
        background-color: blue !important;
        margin: 20px !important;
    }
</style>
</head>
<body>
    <div class="box"><h2>DEMO BOX<h2></div>
</body>
</html>

CSS !important - Impact On The Cascade

cascade 是一个算法，它定义用户代理如何组合来自不同来源的属性值。您可以在 here 中了解更多信息。

标记为 !important 的那些规则或属性比那些没有标记的属性权重更高。如果两个规则适用于一个元素，而其中一个标记为 !important ，则重要规则获胜。

有三个来源： author, reader, and user agent 。您可以在 here 中了解更多信息。

在正常情况下，作者的样式优先于读者的样式。 !important 读者的样式比任何其他样式都强，包括 !important 作者样式。作者样式和读者样式都优先于用户代理的默认样式。

在声明权重方面需要考虑五个级别。按从最高到最低权重的顺序排列，它们是：

  1. Reader important declarations

  2. Author important declarations

  3. Author normal declarations

  4. Reader normal declarations

  5. User agent declarations

CSS !important - Transitions

但是 transitions 是例外。 CSS transitions 控制属性更改的速度。在这些转换过程中，属性不匹配特定重要的声明，因此转换是唯一可以覆盖 !important 声明的方面。

以下示例演示了 CSS transitions 如何覆盖 !important 规则，从而实现网页上平滑且赏心悦目的效果。

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      background-color: red;
      transition: background-color 2s;
   }
   .box:hover {
      background-color: blue !important;
   }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

CSS !important - Inline Styles

内联样式是那些您可以使用样式属性直接添加到 HTML 元素中的样式。这些样式可以是基本的或重要的。无论它们在何处定义，基本的内联样式都比其他基本样式更强。

!important 内联样式比 !important 网站样式更强，但不如用户或浏览器样式强。但是，样式中的特殊 transitions 可以覆盖 !important 内联样式。

以下示例演示了这一点：

<html>
<head>
<style>
    p#bright {color: silver;}
    p {color: black !important; }
</style>
</head>
<body>
    <p style="color:red !important">Welcome to Tutorialspoint!</p>
</body>
</html>

CSS !important and Specificity

根据 CSS 规则，如果冲突的声明适用于一个元素并且它们都具有相同的权重，那么它们应该按特殊性进行排序，最具体的声明获胜。但如果属性被声明为重要属性，那么无论选择器特殊性如何匹配正常声明，来自同一来源和层叠层的重要声明总是优先。

当来自相同源和层的两个重要声明应用到同一元素时，浏览器会选择并使用特定性最高的声明，如下所示。此处文本颜色为红色：

<html>
<head>
<style>
    #demo-para p {
        color: green !important;
    }
    p {
        color: red !important;
    }
</style>
</head>
<body>
    <p id="demo-para">Welcome to Tutorialspoint! </p>
    <p>A place to find all courses!</p>
</body>
</html>

CSS !important - Impact on shorthand property

当你在一个速记属性中使用 !important 时，它同样会对所有单独属性施加重要性。以下示例相同。此示例：

p {
    background: red !important;
}

上述样式等效于：

h2 {
   font-variant : normal !important;
   font-weight : bold !important;
   font-size : 15px !important;
   font-family : "Times New Roman", Times, Serif !important;
}

CSS !important - Impact on Custom property

当你在一个自定义属性中添加 !important 时，这表示该值非常重要。但在设置之后， !important 部分会被从该值中移除。 !important 标记不会被作为自定义属性值的一部分传递给 var() 函数。

以下代码演示了 !important 对自定义属性的影响：

<html>
<head>
  <style>
    :root {
      --primary-color: blue !important;
      --primary-color: red ;
    }

    .box {
      background-color: var(--primary-color) ;
      width: 200px;
      height: 200px;
    }
    p {
        color: var(--primary-color);
      }
  </style>
</head>
<body>
  <div class="box"></div>
  <p>Welcome to Tutorialspoint! </p>
</body>
</html>

CSS !important - Override

以下示例演示了 !important 规则如何覆盖同一属性的其他 !important 规则。它允许你控制 CSS 样式的特定性和优先级。当你运行该程序时，你会看到 <div> 中的文本为红色，第一个 <span> 中的文本为蓝色，第二个 <span> 中的文本为绿色。

<html>
<head>
<title>!important Overrides !important</title>
<style>
    .demo-important-text {
        color: red !important;
    }

    .demo-important-text span {
        color: blue !important;
    }

    .demo-important-text span span {
        color: green !important;
    }
</style>
</head>
<body>
    <div class="demo-important-text">
        This sentence should be red.
        <span>
            This sentence should be blue.
            <span>
                This sentence should be green.
            </span>
        </span>
    </div>
</body>
</html>