如何使用javascript更改.css优先级

Question

我需要使用javascript更改加载的.css文件的优先级。我发现我可以通过替换<link rel="stylesheet"….>标记。这个解决方案在除IE之外的所有浏览器中都能很好地工作。我使用以下代码：

var firstCss =  styleSheets[0].ownerNode;
var defaultCss =  styleSheets[1].ownerNode;
firstCss.parentNode.insertBefore(defaultCss, firstCss);

那么，对于这样的问题，有没有更好的解决方案，或者可能有人知道如何使这些代码在IE下工作。

Answer 1

我解决了这个问题，也许不是最好的方法，但它确实有效。我写了以下代码：

if (document.createStyleSheet) {
  document.createStyleSheet(defaultCss.href,0);
  defaultCss.cssText = "";
} else {
  firstCss.ownerNode.parentNode.insertBefore(defaultCss.ownerNode, firstCss.ownerNode);
}

我使用"defaultCs.cssText="；"来清理旧的CSS文件，因为你无法在IE7-8下获得样式表的ownerNode（但你可以在IE9中完成）并删除旧的样式表。所以，如果你把CSS文件加载到第一个位置，你在最后一个位置仍然会有相同的CSS文件，并且它会被优先排序。我检查了它在IE7-9和其他浏览器下的工作情况，也检查了样式表并没有再次从服务器加载——IE从缓存中获取它。希望它对某人有用。

Answer 2

加载CSS文件的顺序对样式的应用影响很小。应用于某个元素的样式由CSS规则中使用的选择器的特殊性决定。较高的特异性压倒较低的特异性，即使稍后宣布具有较低特异性的样式。

特异性可以被视为四个数字的组合，形式为（a，b，c，d），其中a优先于b，b优先于c，c优先于d。因此（0,0,0,2）比（0,0,0,1）具有更高的特异性，（0,0,1,0）比。

只有在使用完全相同的选择器时，样式声明的顺序（即加载样式表的顺序）才是重要的。

例如：

A: h1
B: #content h1
C: <div id="content">
<h1 style="color: #fff">Headline</h1>
</div>

A的特异性为0,0,0,1（一个元素），B的特异性是0,1,0,1，一个ID参考点和一个元素，C的特异性值为1,0,0,0，因为它是内联样式。自从0001＝1<0101＝101<1000，第三条规则具有更高的特异性，因此将被应用。如果第三条规则不存在，就会应用第二条规则。