为什么我的 !important 样式属性在 Chrome 中被覆盖？ [复制]

Question

我正在编写一个 Chrome 扩展程序。我需要所有元素都是相对的。所以我在body 的样式中添加了position: relative !important; 以使它们都相对。但是在我正在测试的页面中，有一些 JS 将某些元素的值设置为position: fixed。我认为important 属性在 CSS 中具有最高优先级，但不知何故该元素仍然是固定的而不是相对的。

这是我在 Chrome Inspect 中得到的： （注意样式顶部的position: fixed 和底部的position: relative !important）。 并且元素仍然是固定的。

如果我取消选中 Chrome Inspect 中的 position: fixed 规则，它将变成相对的，是的，但这就是我现在想要做的，我想要一些 JS 使其（实际上是所有元素）相对。

有没有办法做到这一点？

也许我的问题与此有关：Why isn't my !important attribute working in Google Chrome?，但我不确定。

Answer 1

要将样式应用于所有元素（这似乎是错误的/笨拙的），您可以使用一些 javascript，如下所示：

var i;
var bodyElems = document.getElementsByTagName( "body" ) ;
var body = bodyElems[ 0 ] ;
var tags = body.getElementsByTagName("*");
for ( i = 0; i < tags.length; i++ ) {
  tags[i].style.setProperty('position', 'relative', 'important');
}

Here is a Fiddle

Answer 2

正如@dandavis 所指出的，样式正在被更具体的 CSS 覆盖。您可以随时尝试“*”选择器，或为所有标签（body、div、span 等）指定 css 位置。