!important 在 CSS 中是什么意思？答案

【问题标题】：What does !important mean in CSS?!important 在 CSS 中是什么意思？
【发布时间】：2012-03-03 23:01:48
【问题描述】：

!important 在 CSS 中是什么意思？

它在 CSS 2 中可用吗？ CSS 3？

在哪里支持？所有现代浏览器？

【问题讨论】：

标签： css

【解决方案1】：

本质上，它意味着它所说的； '这很重要，忽略后续规则和任何常见的特殊性问题，应用 this 规则！'

在正常使用中，外部样式表中定义的规则被文档head 中定义的样式覆盖，而该样式又被元素本身内的内联样式覆盖（假设选择器）。使用!important 'attribute' (?) 定义规则会丢弃关于“稍后”规则覆盖“早期”规则的正常问题。

此外，通常情况下，更具体的规则会覆盖不太具体的规则。所以：

a {
    /* css */
}

通常被：

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

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

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

使用!important 有其目的（虽然我很难想到），但这很像使用核爆炸来阻止狐狸杀死你的鸡；是的，狐狸会被杀死，但鸡也会被杀死。还有附近。

它还使调试 CSS 成为一场噩梦（来自个人、经验和经验）。

【讨论】：

【解决方案2】：

!important 规则是一种让你的 CSS 层叠但也有你认为最重要的规则总是被应用。有一条规则 !important 属性将始终应用，无论它在哪里规则出现在 CSS 文档中。

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

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

重要的规则将被应用（不包括specificity）

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

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

【讨论】：

IE4+，实际上，有错误，最多包括 6 个。
混淆的发生是因为! 在某些语言中是 NOT 的符号，但现在更清楚了。
我特别高兴您包含了使用!important 的语法。 CSS 与其他语言有很大的不同，以至于很容易忘记如何使用某些东西。
@Si8 - 是的，由于这种混淆，我一直认为“他们”应该将其定义为important!，或者可能是IMPORTANT!，而不是!important。我想知道是否有人（可能会读到这篇文章）知道他们为什么用前面的标点符号来定义它？显然，现在改变它为时已晚。

【解决方案3】：

!important 是 CSS1 的一部分。

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

意思是：

如果周围没有其他重要的事情，请使用我！

不能说得更好。

【讨论】：

!important 不仅限于 Safari 3+；它像所有其他非 IE 浏览器一样从一开始就支持它。 IE 从版本 4 开始就可以理解它，但它只支持从版本 7 开始无错误。

【解决方案4】：

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

这是从低到高的优先级：

在这种特殊性发生之后，规则仍然在派中占有一席之地。

参考文献：

【讨论】：

正如@fabian-barney 指出的!important 是级联顺序 developer.mozilla.org/en-US/docs/Web/CSS/Cascade 的修饰符（参见表格）。

【解决方案5】：

它改变了css级联覆盖优先级的规则。见the CSS2 spec。

【讨论】：