CSS !important 规则

CSS !important 规则用于为属性添加比普通属性更高的优先级。在本教程中，我们将学习 !important 规则以及如何在 CSS 中使用它。以下是 important 规则的语法。

语法

selector {
   property: value !important; 
}

什么是 CSS !important 规则？

感叹号 (!) 后面紧跟单词 important（无空格）告诉浏览器优先考虑该属性的值，高于所有其他声明。
!important 规则将应用于属性的特异性。
如果多个选择器对一个属性使用 important 关键字，则将考虑应用特异性高的选择器。

CSS 中的特异性

CSS 中的特异性决定了当多个规则都可能应用时，哪些样式将应用于元素。例如，内联样式具有最高优先级，然后是 id 选择器，然后是类选择器，最后是元素选择器。

/* Element selector Styles */
p {
  color: black;
}

/* Override the above style, Class have higher specificity */
p.special {
  color: blue;
}

/* Using !important to force an override */
p {
  color: red !important;
}

上述声明将段落的文本颜色设置为红色。元素选择器的样式被类选择器覆盖，然后又被 important 关键字覆盖。

请记住，虽然 '!important' 在特定情况下非常方便，但最好只在真正需要时才使用它。
过于频繁地使用 '!important' 会使您的代码难以管理和调试。
最好依赖正确的 CSS 特异性和结构来避免过度使用 '!important'。

CSS !important 规则示例

以下示例演示了上面看到的 '!important' 的用法。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        /* Element Selector Styles */
        p {
            color: black;
            font-weight: bold;
        }

        /* Using !important to force a color override */
        p {
            color: red !important;
        }
    </style>
</head>

<body>
    <p> 
        This paragraph will be red. Because the style of element 
        selector is overridden by important keyword.
    </p>
</body>

</html>

CSS !important 和特异性

根据 CSS 的特异性，内联样式具有最高优先级，然后是 id 选择器，然后是类选择器，最后是元素选择器。这意味着元素选择器编写的样式可以分别被类选择器、id 选择器和内联样式覆盖。

以下示例使用多个选择器将 color 属性应用于段落，但具有 important 关键字的元素选择器属性应用于段落。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        /*Multiple selectors for paragraph */
        p {
            color: black;
            font-weight: bold;
        }

        .special {
            color: blue;
        }

        #unique {
            color: darkgreen;
        }

        p {
            color: red !important;
        }
    </style>
</head>
<body>
    <p id="unique" class="special">
        This paragraph will be red. Because element selector  
        will set color as black, class selector ".special" 
        will override this color to blue and id selector will 
        make it green. Finally important keyword is used at 
        last so this have more priority.
    </p>
</body>
</html>

覆盖内联样式

内联样式在 CSS 中比任何选择器都具有更高的优先级。但是 important 关键字也可以覆盖内联 CSS。让我们来看一个例子。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
            p {
                color: black !important; 
                font-weight: bold;
            }
    </style>
</head>

<body>
    <p style="color:red">
        Paragraph is black. Inline style is overridden by 
        important keyword
    </p>
</body>

</html>

多个 Important 关键字

当我们使用多个选择器在 CSS 中为一个属性应用多个 important 关键字时，将应用位于特异性高的选择器中的属性。让我们来看一个例子。

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        /*Multiple selectors for paragraph */
        p {
            color: black !important;
            font-weight: bold;
        }

        .special {
            color: blue !important;
        }

        #unique {
            color: darkgreen !important;
        }

        p {
            color: red !important;
        }
    </style>
</head>

<body>
    <p id="unique" class="special">
        This paragraph will be darkgreen. Since important keyword 
        is present at every selectors, high priority selector 
        will be chosen. In this case it is id "#unique"
    </p>
</body>

</html>

自定义属性的 CSS !important

当您向自定义属性添加 '!important' 时，这意味着此值非常重要。'!important' 标志不会作为自定义属性值的一部分传递给var() 函数。

示例

<!DOCTYPE html> 
<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> Primary Color variable is Blue </p>
</body>

</html>

简写属性上的 CSS !important

当您将 '!important' 与简写属性一起使用时，它也将其重要性应用于其所有单个属性。以下示例是相同的。此示例

示例

<!DOCTYPE html> 
<html>

<head>
    <style>
        p {
            /* Applies to all */
            font: 15px Arial, sans-serif !important;
        }
    </style>
</head>

<body>
    <p style="font-size: 100px;">
        The font will set as per in CSS declaration. The font size of 
        100px will not be applied because important keyword is used 
        for shorthand property font. 
    </p>
</body>

</html>

打印页面