Css 简明教程

CSS - !important

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

In CSS, the notation !important is a special way to give a CSS declaration precedence over other competing rules that apply to the same selector. This declaration is used to give a CSS rule higher specificity and priority, which means that it will override other conflicting styles, even if those styles have higher specificity or are defined later in the stylesheet.

  1. An exclamation mark (!) followed by the word important (without space) tells the browser to prioritize that style above all others.

  2. This rule changes how the browser chooses which rules to follow. A rule without this special attention is called normal.

  3. It’s essential that !important is the very last element in the declaration, just before the terminating semicolon. This placement is especially important, when it comes to properties that allow values containing multiple keywords, such as font property.

Syntax

selector {
   property: value !important;
}

CSS !important - Basic Example

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

The following example demonstrates the use of !important, where we override the base styles by redefining the .box class with new styles:

<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 中了解更多信息。

The cascade is an algorithm that defines how user agents combine property values originating from different sources. You can read more on this here.

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

Those rules or properties marked !important are given higher weight than those that are not. If two rules apply to an element, and one is marked !important, the important rule wins out.

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

There are three origins: author, reader, and user agent. You can read more about this here.

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

Under normal circumstances, the author’s styles win out over the reader’s styles. !important reader styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent’s default styles.

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

There are five levels to consider in terms of declaration weight. In order of most to least weight, these are:

  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 声明的方面。

However transitions are exception. CSS transitions control the speed of property changes. During these transitions, a property does not match a particular important declaration, so transitions are the only aspect that can override !important declarations.

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

Following example demonstrates how CSS transitions can override the !important rule, allowing for smooth and visually appealing effects on web pages.

<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 元素中的样式。这些样式可以是基本的或重要的。无论它们在何处定义，基本的内联样式都比其他基本样式更强。

Inline styles are those that you add directly to HTML elements with the style attribute. These styles can be basic or important. Basic inline styles are stronger than other basic styles, regardless of where they’re defined.

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

!important inline styles are stronger than !important site styles, but not as strong as user or browser styles .However, special transitions in styles can override !important inline styles.

以下示例演示了这一点：

Following example demonstrates this:

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

As per CSS rules, if conflicting declarations apply to an element and they all have the same weight, they should be sorted by specificity, with the most specific declaration winning out. But in case the property is declared important, then no matter how high the selector specificity matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence.

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

When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity as demonstrated below. Here the color of text is red:

<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 时，它同样会对所有单独属性施加重要性。以下示例相同。此示例：

When you use !important with a shorthand property, it also applies importance to all its individual properties. The following examples are identical.This example:

p {
    background: red !important;
}

上述样式等效于：

The above style is equivalent to:

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() 函数。

When you add !important to a custom property, it means that this value is really important. But after setting it, the !important part is removed from the value. The !important flag is not passed as part of the custom property value to the var() function.

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

The following code demonstrates impact of !important on custom property:

<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> 中的文本为绿色。

The following example demonstrates how the !important rule can override another !important rule for the same property. It allows you to control the specificity and priority of CSS styles. When you run this program, you will see that the text inside the <div> is red, the text inside the first <span> is blue, and the text inside the second <span> is green.

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