CSS 中的 important 是什么作用？

!important 在 CSS 中是一个特殊的声明，用于提高一个 CSS 规则的优先级。当多个样式冲突时，即多个规则应用于同一元素的同一个属性，通常会根据特定的优先规则（称为层叠顺序）来决定哪个规则最终会被应用。层叠顺序考虑了源代码的顺序、选择器的特异性以及继承等因素。

使用 !important 可以覆盖层叠顺序中的其他规则，即使那些规则本身的特异性更高或在源代码中出现得更晚。这意味着，即便是内联样式，也可能被包含 !important 的样式表中的规则覆盖，因为内联样式通常有更高的优先级。

但是，滥用 !important 可能会导致 CSS 变得难以维护，因为它破坏了层叠样式表的自然层叠规则。通常建议只在确实必要时（比如需要覆盖第三方组件的样式，且其他方法不可行时）使用 !important。

举个例子，假设你有一个页面上的按钮，它在大部分情况下应该是蓝色的，但在一个特定的模块中你希望它是红色的。你可能会这样写 CSS：

css
/* 通用样式，应用于所有按钮 */
.button {
    color: blue;
}

/* 特定模块的按钮颜色 */
.module .button {
    color: red !important;
}

在这个例子中，即使 .module .button 的选择器特异性高于 .button，!important 仍然确保了所有 .module 类下的按钮都会是红色的，即便是后面有更特定的规则试图将按钮的颜色设置为非红色。

从本质上讲，它的意思就是它所说的； “这很重要，忽略后续规则以及任何常见的特殊性问题，应用_此_规则！”

在正常使用中，外部样式表中定义的规则会被head文档中定义的样式所否决，而文档中定义的样式又会被元素本身内的内联样式所否决（假设选择器具有相同的特异性）。使用“属性”(?) 定义规则!important可以消除有关“较晚”规则覆盖“较早”规则的正常担忧。

此外，通常，更具体的规则将覆盖不太具体的规则。所以：

shell
a {
    /* css */
}

通常会被以下因素否决：

shell
body div #elementID ul li a {
    /* css */
}

由于后一个选择器更具体（通常，在哪里找到更具体的选择器（在样式表或head外部样式表中）并不重要），它_仍然_会覆盖不太具体的选择器（内联样式属性将_始终_覆盖“more-”或“less-”特定选择器，因为它_总是_更具体。

但是，如果您添加!important到不太具体的选择器的 CSS 声明，它将具有优先权。

使用!important有它的目的（尽管我很难想到它们），但这很像使用核爆炸来阻止狐狸杀死你的鸡;是的，狐狸会被杀死，但鸡也会被杀死。还有邻居。

它还使调试 CSS 成为一场噩梦（根据个人经验）。

!important 规则是一种让你的 CSS 级联的方法，但也有你认为最重要的规则总是被应用。具有 !important 属性的规则将始终被应用，无论该规则出现在 CSS 文档中的何处。

所以，如果你有以下情况：

shell
.class {
   color: red !important;
}
.outerClass .class {
   color: blue;
}

重要的规则将被应用（不计算特殊性）

我相信!importantCSS1中出现了所以每个浏览器都支持它（IE4到IE6部分实现，IE7+完整）

另外，您不想经常使用它，因为如果您与其他人一起工作，您可以覆盖其他属性。

!important是 CSS1 的一部分。

支持的浏览器：IE5.5+、Firefox 1+、Safari 3+、Chrome 1+。

这意味着，类似：

如果周围没有什么重要的事情，就用我吧！

不能说得更好。

当按原点排序完成时，它用于影响 CSS 级联中的排序。它与其他答案中所述的特异性无关。

以下是从最低到最高的优先级：

1. 浏览器样式
2. 用户样式表声明（不带 !important）
3. 作者样式表声明（不带 !important）
4. !重要的作者样式表
5. !重要的用户样式表

在此之后，规则的特殊性仍然发挥着作用。

参考：

• http://www.w3.org/TR/CSS2/cascade.html#cascade
• https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html

它改变了 css 级联覆盖优先级的规则。请参阅CSS2 规范。