为什么这个重要的 CSS 值被覆盖了

Why is this !important CSS value overridden?

本文关键字：覆盖 CSS 重要的 为什么      更新时间：2023-09-26

HTML：

<div id="test">This is a test</div>

JavaScript：

var elem = document.getElementById('test');
elem.style.setProperty('color', 'green', 'important');
elem.style.color = 'red';

现场演示：http://jsfiddle.net/4fn6h/3/

文本在Chrome，Safari和IE9中为绿色，但在Firefox和Opera中为红色。(另外，IE7 和 IE8 中的文本是黑色的，因为代码抛出了一个错误，但让我们忽略它......

那么，哪些浏览器遵循这里的标准？是否可以覆盖setProperty(...,'important')？

规范不清楚。有两种方法可以查看它：

  1. 这是WebKit/IE9中的一个错误。如果要覆盖color值，则旧值没有理由保留，无论是否重要。
  2. WebKit/IE9 是正确的。DOM 接口style操作元素的 style 属性，该元素被视为 CSS 声明块。在 CSS 块中，设置!important的属性将始终优先于未设置的属性。根据该规则，更改为"红色"应该没有效果，因此实际上会忽略它。

我认为后者是最有可能的解释。考虑有这样的声明：

p { color: red !important; }

如果添加第二个color规则，而不添加!important ，则它不起作用：

p {
  color: red !important;
  color: blue;
}
/* the color is still red */

这同样适用于直接操作 HTML style 属性。

因此，Chrome/Safari/IE9 中的行为与 CSS 级联规则一致，而 FF 和 Opera 将 DOM 样式视为一个简单的对象，而不考虑级联规则，而不是 CSS 声明的接口。

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

有趣的事实：webkit 似乎正在为 important 做一个字符串匹配，所以这也有效：

elem.style.setProperty('color', 'red', 'this is a really important rule');

还有一个提示：下次选择一个更好的颜色对，你让色盲很难帮助:)

可能是 Firefox 和 Opera 的行为更合适。

当你发出elem.style.color = 'red'时;你没有关闭颜色的"重要"优先级，在这种情况下，将颜色更改为红色是有意义的。 至于他们为什么选择以一种或另一种方式这样做，我不知道。

是否应该覆盖 setProperty(...，'important'(？是的，应该。但是你必须用另一个ele.style.setProperty电话来做到这一点。看看这个，你应该在所有现代浏览器中看到red。

那么，哪些浏览器遵循这里的标准？由于green是用!important设置的，所以它不应该被red替换，因为red不是用!important设置的。这意味着Chrome，Safari和IE9遵循标准，而Firefox则不是。

相关文章：