CSS 優先メカニズム

スタイルの優先順位

複数のスタイル: 外部スタイル、内部スタイル、インライン スタイルが同じ要素に同時に適用される場合、それは複数のスタイルの場合です。

一般に、優先順位は次のとおりです。

(外部スタイル) < (内部スタイル) 内部スタイルシート < (インライン スタイル)

場合は例外があります。スタイルは内部スタイルの後に配置され、外部スタイルは内部スタイルをオーバーライドします。

例は次のとおりです:

/* 内部スタイル */ h3 { color: 緑;} body> テスト! 1. インラインスタイルシートの重みは 100 です 3。 4. HTMLタグセレクターの重みは1です セレクターの重みを使用して値を計算して比較します:

#redP p {权/*正しい値 = 100+1 = 101*/

color: # f00;/*赤*/

}

#Redp .RD EM { =/*正しい値 = 100+10+1 = 111*/

color:#00F;/*青* /

}} #Redp p span em { /*right value = 100+1+1+1 = 103*/ color:#ff0; /* yellow*/ } & lt;/style> class="red">赤 赤

;/p>

結果: タグ内のデータは青色で表示されます。

CSS 優先順位ルール:

A 各セレクターには重みがあり、重みが大きいほど優先順位が高くなります。

B 重みが等しい場合、後で表示されるスタイル シート設定の方が優先されます。 ;

C 作成者のルールは閲覧者のルールよりも優先されます。つまり、Web ページ作成者によって設定された CSS スタイルは、ブラウザによって設定されたスタイルよりも優先されます。

D 継承された CSS スタイルはそうではありません。後で指定する CSS スタイルと同じくらい良いです。

E 「! important」でマークされたルールは、同じ属性設定の中で最も高い優先度を持ちます。例は次のとおりです。

#Redp p { /*同じグループ内の 2 つの色の属性*/ color:#00F! 重要;/*最大の優先事項*/ color:#f00; } & lt;/body>

結果: Firefox では青色で表示されます; IE 6 では赤色で表示されます

スクリプトを使用してスタイルを追加した後、JavaScript スクリプトを使用して内部スタイルを挿入した場合スタイルはスクリプトを使用して作成されます)、IE ブラウザーはその独自性を示します。コードは次のとおりです:

デモ /css" /> (function (){ var Agent = window.navigator.userAgent.toLowerCase(); var is_op = (agent.indexOf("opera") ! = -1); var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op; var is_ch = (agent.indexOf("chrome") != -1); var cssStr="h3 {color:green;}"; var s=document.createElement("style"); var head=document.getElementsByTagName( "head").item(0 ) ; var link=document.getElementsByTagName("link"); link=link.item(0) _ie) .appendChild(s) ); document.styleSheets.item(document.styleSheets.length- 1).cssText=cssStr; var t=document.createTextNode(); t.nodeValue=cssStr; s. appendChild(t); head.insertBefore(s,link) } ,,, head.insertBefore(s,link); IE では緑色、IE 以外のブラウザでは青色です。

結果: Firefox / Chrome / Safari / Opera では、テキストが青色になります。 IE ブラウザでは、テキストは緑色になります。

IE にスタイル コンテンツを追加する

JavaScript コードを追加します:

var s=document.createElement("style"); var head=document.getElementsByTagName("head" ) .item(0); var link=document.getElementsByTagName("link").item(0); head.insertBefore(s,link); / *注: IE では、 コードでは の前に が挿入されますが、実際のメモリでは は の後にあります。 ここには「IE の奇妙な CSS アプリケーションのバグ」も存在します。 */ var oStyleSheet = document.styleSheets[0]; //これは実際には の外部スタイルに を追加しています。 et.addRule ("h3","color:green;"); alert(oStyleSheet.rules[0].style.cssText); alert(document.styleSheets[0].rules[0].style .cssText); //方法 2 var cssStr="h3 {color:green;}"; document.styleSheets.item(document.styleSheets.length-1 ).cssText=cssStr; IE ブラウザのダウンロードまたはレンダリングの順序は次のとおりです。 ● IE のダウンロード順序は上から下です

● JavaScript 関数の実行はブロックされます。 IE のダウンロード;

● IE のレンダリングの順序も上から下です

● ページの特定の部分をレンダリングする場合、上記のすべての部分が実行されます。ダウンロードされました (ただし、関連するすべての要素がダウンロードされたことを意味するわけではありません。)

● ダウンロード プロセス中に、特定のタグがファイルに埋め込まれており、ファイルが意味的に解釈可能な場合 (例: JS スクリプト、 CSS スタイル) の場合、IE のダウンロード プロセスにより、ダウンロード用に別の接続が有効になります。また、JS または CSS に再定義がある場合、ダウンロード後に解析され、後で定義された関数が以前に定義された関数を上書きします。

● 解析プロセス中は、ページの下向きのすべての要素のダウンロードを停止します。スタイル シート ファイルは特別であり、ダウンロードされると、以前にダウンロードされたすべてのスタイル シートと一緒に解析され、以前にレンダリングされた要素もすべて再レンダリングされます。ページ全体がレンダリングされるまで、この方法でレンダリングを続けます。

● Firefox がダウンロードとレンダリングを処理する順序は、iframe のレンダリングなどのいくつかの微妙な違いを除いて、ほぼ同じです。

CSS 優先メカニズムに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。