为什么这个 !important CSS 值会被覆盖？答案

【问题标题】：Why is this !important CSS value overridden?为什么这个 !important CSS 值会被覆盖？
【发布时间】：2012-05-29 09:05:22
【问题描述】：

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')？

【问题讨论】：

当然，在我看来，Firefox 的行为会更受欢迎。一个属性不能有两个值，对吧？
@cliffsofinsanity 但问题是：哪种样式应该生效，最后分配的样式还是优先级最高的样式？
...在任何情况下，使“重要”看起来不是一个合理的方法，以至于它的当前值比同一元素的未来值更重要。似乎“重要”应该只影响级联。
因此 Chrome 不会让您在设置后恢复重要性。太好了... Firefox 应该是蓝色的，因为元素上的本地“重要”已设置为 null，并且样式表现在具有优先权。
除了样式表中的“！important”会覆盖内联样式。我认为这就是直接在元素上提供“重要”的原因。 ...等等，也许我又误会了。

【解决方案1】：

规格不明确。有两种查看方式：

这是 WebKit/IE9 中的一个错误。如果您要覆盖 color 值，则没有理由保留旧值，无论重要与否。
WebKit/IE9 是正确的。 DOM 接口style 操作元素的style 属性，该属性被认为是CSS Declaration Block。在 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 声明的接口。

有趣的事实：webkit 似乎正在为important 进行字符串匹配，所以这也可以：

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

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

【讨论】：

! 是分隔符，important 是关键字。 delimiter 是专为浏览器解析样式而设计的。 important 是应该执行的“操作”。 super 或 very 不是任何 w3 标准的一部分，我们开发人员不应该使用它们。让我们大声喧哗。
@RayCheng 你在上面看到“好奇”这个词了吗？我只是觉得这很有趣。此外，setProperty 的 priority 参数不应包含 !，但该函数也接受 setProperty('color', 'red !important', null)（至少是 webkit）。

【解决方案2】：

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

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

【讨论】：

一种可能性是 FF/Opera 会简单地覆盖整个 color 属性。仅仅因为旧值有 !important 并不意味着该属性是只读的。但是为什么 Chrome/Safari/IE9 也不覆盖它呢？
规范中没有任何内容。设置优先级后，Chrome/Safari/IE9 中会发生什么（如在jsfiddle.net/4fn6h/9 中）？
也许他们从未考虑或担心开发人员可能会以两种不同的方式访问颜色，style.color 和 style.setProperty，因此没有必要解决这种不一致问题。也许他们预计开发环境会有自己的某些约定。我不知道这些技术是否通常混合在 JavaScript 库中。
@Šime Vidas, !important 可以覆盖普通的 css。普通的 css 永远不应该覆盖 !important css。唯一一次 !important css 被覆盖是用户和作者 css 都包含 !important 并且用户 css 优先。详情请看我的帖子。

【解决方案3】：

是否可以覆盖 setProperty(...,'important')？是的，它应该。但你必须通过另一个ele.style.setProperty 来电。查看this，您应该会在所有现代浏览器中看到red。

那么，哪些浏览器遵循这里的标准？由于green 设置为!important，因此不应将其替换为red，因为red 未设置为!important。这意味着 chrome、safari 和 IE9 遵循标准，而 firefox 则没有。

【讨论】：

这都是正确的，但是您忘记了手头的问题是用于修改样式声明的 DOM 接口，而不仅仅是 CSS。此行为与直接操作 style 属性相反，后者不允许设置 !important。