2

JavaScript を使用して、読み込まれた .css ファイルの優先度を変更する必要があります。head 要素の < link rel="stylesheet".... > タグの位置を置き換えるだけでこれを実行できることがわかりました。このソリューションは、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 およびその他のブラウザで動作することを確認します。また、スタイルシートがサーバーから再度読み込まれません。IE はキャッシュから取得します。それが誰かに役立つことを願っています。

于 2012-07-19T09:43:30.483 に答える
-2

CSS ファイルをロードする順序は、スタイルの適用方法にほとんど影響しません。特定の要素に適用されるスタイルは、CSS ルールで使用されるセレクターの特異性によって決まります。より低い特異性を持つスタイルが後で宣言されたとしても、より高い特異性はより低い特異性を無効にします。

特異性は、(a、b、c、d) の形式の 4 桁の組み合わせとして見ることができます。ここで、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 (1 つの要素)、B の特異性は 0,1,0,1 (1 つの ID 参照ポイントと 1 つの要素)、C の特異性値は 1,0,0 です。 ,0、インライン スタイリングであるため。0001 = 1 < 0101 = 101 < 1000 であるため、3 番目のルールの方が具体性が高いため、適用されます。3 番目のルールが存在しない場合は、2 番目のルールが適用されます。

于 2012-07-18T15:40:45.833 に答える