!important 在 CSS 中是啥意思？

Posted 2023-03-06

【中文标题】!important 在 CSS 中是啥意思？

【英文标题】：What does !important mean in CSS?!important 在 CSS 中是什么意思？

【发布时间】：2012-03-03 23:01:48

【问题描述】：

!important 在 CSS 中是什么意思？

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

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

【问题讨论】：

w3.org/TR/CSS2/cascade.html#important-rules

...尽可能避免的事情。

How do you read !important in CSS?、What are the implications of using “!important” in CSS? 的可能重复项，另请参阅：when to use !important property in css?、When to use “!important” to save the day (when working with CSS)

不重要。 （网络开发者笑话）。

【参考方案1】：

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

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

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

a 
    /* css */

通常被：

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

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

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

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

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

【讨论】：

这也让许多开发人员感到困惑，因为在许多编程语言中前缀 !表示不是。

!important 的一个目的是在一个 GreaseMonkey 脚本中，您可以在其中故意覆盖可能比您的更具体的其他人的 CSS。

正式的 W3 calls it 一个“规则”。

至少不是讽刺，说important!（重要的不是）

您写道：“在正常使用中，外部样式表中定义的规则被文档头部定义的样式所取代”。这是错误的。

【参考方案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 级联中的排序。 它与其他答案中所述的特异性无关。

这是从低到高的优先级：

浏览器样式 用户样式表声明（不带 !important） 作者样式表声明（不带 !important） ！重要的作者样式表 ！重要的用户样式表

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

参考文献：

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

【讨论】：

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

【参考方案5】：

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