2

我需要使用 javascript 更改加载的 .css 文件的优先级。我发现我可以通过替换 < link rel="stylesheet".... > 标记在 head 元素中的位置来做到这一点。此解决方案适用于除 IE 之外的所有浏览器。我为此使用以下代码：

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

那么对于此类问题是否有更好的解决方案，或者也许有人知道如何使此代码在 IE 下工作。

4

2 回答 2

0

我解决问题的方式可能不是最好的，但它确实有效。我写了以下代码：

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

我使用 "defaultCss.cssText = "";" 清理旧的 CSS 文件，导致您无法在 IE7-8 下获取 styleSheet 的 ownerNode（但您可以在 IE9 中进行）并删除旧的样式表。因此，即使您将 CSS 文件加载到第一个位置，您仍然会在最后一个位置具有相同的内容，并且它将被优先考虑。我检查它在 IE 7 - 9 和其他 borwsers 下工作，样式表也不会再次从服务器加载 IE 从缓存中获取它。希望它对某人有用。

于 2012-07-19T09:43:30.483 回答
-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) 比 (0,0,0,2) 具有更高的特异性。

样式声明的顺序（即加载样式表的顺序）仅在选择器以完全相同的特性使用时才重要。

例如：

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，第三条规则具有更高的特异性，因此将被应用。如果第三条规则不存在，则将应用第二条规则。

于 2012-07-18T15:40:45.833 回答