为什么我的！重要样式属性会被Chrome覆盖？

Question

我正在撰写Chrome扩展程序。而且我需要所有元素都是相对的。所以我将position: relative !important;添加到body的样式中以使它们全部相对。但在我测试的页面中，有一些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覆盖。你可以随时尝试＆＃34; *＆＃34;选择器，或指定所有标签的css位置（body，div，span等）。