CSSスタイルの優先順位ルール-CSSチュートリアル-php.cn

CSSスタイルの優先順位ルール

王林

リリース： 2021-01-30 10:31:18

転載

4246 人が閲覧しました

CSSスタイルの優先順位ルール

#CSS スタイルの優先順位の概要:

外部スタイル、内部スタイル、インラインスタイルが同じ要素に同時に適用される場合、優先順位は次のようになります。 :

(外部スタイル)外部スタイルシート

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

例は次のとおりです:

<head>    
    <style type="text/css">    
      /* 内部样式 */    
      h3{color:green;}    
    </style>    
    <!-- 外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h3{color:blue;} -->    
</head>    
<body>    
    <h3>测试！</h3>    
</body>

ログイン後にコピー

セレクターの優先順位

CSSスタイルの優先順位ルール

説明:

1. インラインスタイルシート最大の重みは 1000;

2. ID セレクターの重みは 100

3. クラスセレクターの重みは 10

4. HTML タグの選択重みセレクターの重みは 1

セレクターの重みを使用して計算と比較を行います。例は次のとおりです:

<html>    
  <head>    
    <style type="text/css">    
        #redP p {    
             /* 权值 = 100+1=101 */    
             color:#F00;  /* 红色 */    
        }    
        #redP .red em {    
             /* 权值 = 100+10+1=111 */    
             color:#00F; /* 蓝色 */    
        }    
        #redP p span em {    
             /* 权值 = 100+1+1+1=103 */    
             color:#FF0;/*黄色*/    
        }    
    </style>    
  </head>    
  <body>    
     <div id="redP">    
        <p class="red">red    
           <span><em>em red</em></span>    
        </p>    
        <p>red</p>    
     </div>    
  </body>    
</html>

ログイン後にコピー

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

CSS 優先順位ルール:

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

B 重みが等しい場合、後で表示されるスタイルシートが優先されます。設定は、最初に表示されるスタイルシート設定よりも優先される必要があります。

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

D 継承された CSS スタイルは、後で指定された CSS スタイルほど優れていません;
E 同じ属性設定セットで、「!重要」でマークされたルールの優先順位" が最も高く、例は次のとおりです:
(学習ビデオ共有: css ビデオチュートリアル)
<html> <head> <style type="text/css"> #redP p{ /*两个color属性在同一组*/ color:#00f !important; /* 优先级最大 */ color:#f00; } </style> </head> <body> <div id="redP"> <p>color</p> <p>color</p> </div> </body> </html>
ログイン後にコピー
結果: Firefox では青色で表示され、赤色で表示されます。 IE 6 の場合;
スクリプトを使用してスタイルを追加する
外部スタイルが接続され、JavaScript スクリプトを使用して内部スタイルを挿入する場合 (つまり、内部スタイルはscript) を使用すると、IE ブラウザーがその独自性を発揮します。コードは次のとおりです:
<html> <head> <title> demo </title> <meta name="Author" content="xugang" />  <link rel="stylesheet" href="styles.css" type="text/css" />   <script type="text/javascript">  </script> </head> <body> <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3> </body> </html>
ログイン後にコピー
結果: 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 中，虽然代码是将<style>插入在<link>之前，但实际内存中，<style>却在<link>之后。这也是“IE中奇怪的应用CSS的BUG”之所在！ */ var oStyleSheet = document.styleSheets[0]; //这实际是在<link>的外部样式中追加 oStyleSheet.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 のレンダリングの順序も上から下です;

# IE ダウンロードとレンダリングは同時に実行されます;
#● ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (ただし、これは、関連するすべての要素がダウンロードされることを意味するわけではありません) )
#● ダウンロードプロセス中に、特定のタグが埋め込みファイルであり、そのファイルが意味的に解釈可能である場合 (例: JS スクリプト、CSS スタイル)、IE のダウンロードプロセスでは個別のファイルが有効になります。ダウンロードに接続します。また、ダウンロード後に解析されるため、JS や CSS に再定義があった場合、後から定義した関数が先に定義した関数を上書きします。

# 解析プロセス中に、ページの下向きのすべての要素のダウンロードを停止します。スタイルシートファイルは特別です。ダウンロードされると、以前にダウンロードされたすべてのスタイルシートとともに解析されます。解析が完了すると、以前のすべての要素 (以前にレンダリングされた要素を含む) が再レンダリングされます。ページ全体がレンダリングされるまで、この方法でレンダリングを続けます。
## ● Firefox は、iframe レンダリングなどの微妙な違いを除き、ダウンロードとレンダリングをほぼ同じ順序で処理します。
関連する推奨事項:
CSS チュートリアル

以上がCSSスタイルの優先順位ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。