CSS !important - 易学教程，面试笔记经验！

在 CSS 中，符号 !important 是一种特殊的方式，可以使 CSS 声明优先于适用于同一选择器的其他竞争规则。此声明用于为 CSS 规则提供更高的特异性和优先级，这意味着它将覆盖其他冲突的样式，即使这些样式具有更高的特异性或稍后在样式表中定义。

感叹号 (!) 后跟重要一词（不含空格）告诉浏览器将该样式优先于所有其他样式。
此规则更改浏览器如何选择要遵循的规则。没有这种特殊注意的规则称为正常规则。
重要的是！important 是声明中的最后一个元素，位于终止分号之前。
当涉及到允许值包含多个关键字的属性（例如字体属性）时，此位置尤其重要。

语法

selector {
   property: value !important; 
}

CSS !important: 基本示例

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

<html>
<head>
<style>
    /*基本样式 */
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 10px;
    }
    /* 使用!important覆盖样式 */
    .box {
        background-color: blue !important;
        margin: 20px !important;
    }
</style>
</head>
<body>
    <div class="box"><h2>DEMO BOX<h2></div>
</body>
</html>

请记住，虽然 !important 在特定情况下很方便，但最好仅在真正需要时使用它。
过于频繁地使用 !important 会使代码更难管理和调试。
依靠适当的 CSS 特异性和结构来防止过度使用 !important 是一个很好的做法。

CSS !important: 对级联的影响

级联是一种算法，定义用户代理如何组合源自不同源的属性值。您可以在此处了解更多信息。

标记为 !important 的规则或属性的权重高于未标记为 !important 的规则或属性。如果两个规则适用于一个元素，并且其中一个被标记为 !important，则 important 规则胜出。

共有三个来源:作者、读者和用户代理。

一般情况下，作者的风格胜过读者的风格。 !important 读者风格比任何其他风格都更强，包括 !important 作者风格。作者和读者样式都会覆盖用户代理的默认样式。

在声明权重方面需要考虑五个级别。按照权重从大到小的顺序，这些是:

读者重要声明
作者重要声明
作者正常声明
读者正常声明
用户代理声明

CSS !important: 过渡

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

以下示例演示了 CSS 转换如何覆盖 !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: 内联样式

内联样式是使用 style 属性直接添加到 HTML 元素的样式。这些风格可以是基本的，也可以是重要的。基本内联样式比其他基本样式更强，无论它们在哪里定义。

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

以下示例演示了这一点:

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

CSS !important: 特异性

根据 CSS 规则，如果声明冲突适用于一个元素并且它们都具有相同的权重，它们应该按特殊性排序，最具体的声明获胜。但是，如果该属性被声明为 important，那么无论选择器特异性与普通声明的匹配程度有多高，来自同一源和级联层的重要声明将始终具有优先级。

当来自同一来源和层的两个重要声明应用于同一元素时，浏览器会选择并使用具有最高特异性的声明，如下所示。这里文本的颜色是红色:

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

CSS !important: 对简写属性的影响

当您将 !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: 对自定义属性的影响

当您添加时!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 Yxjc123.com! </p>
</body>
</html>

CSS ! important: 覆盖

以下示例演示了 !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">
        这句话应该是红色的。
        <span>
            这句话应该是蓝色的。
            <span>
                这句话应该是绿色的。
            </span>
        </span>
    </div>
</body>
</html>

CSS !important 样式覆盖

语法