CSSスタイル定義の優先順位のまとめ
CSSスタイル定義の優先順位のまとめ
優先順位は次のとおりです.
ブラウザのデフォルト<外部スタイルシート<内部スタイルシート<インラインスタイル
スタイルシートには、次のものがあります.
クラスセレクタ<クラス派生セレクタ
派生セレクタは以前はコンテキストセレクタと呼ばれていたので、完全な積層優先度は次のとおりです.
ブラウザのデフォルト<外部スタイルシート<外部スタイルシートクラスセレクタ<外部スタイルシートクラス派生セレクタ<外部スタイルシートクラス派生セレクタ<外部スタイルシートIDセレクタ<外部スタイルシートID派生セレクタ<内部スタイルシート<内部スタイルシートクラスセレクタ<内部スタイルシートクラス派生セレクタ<内部スタイルシートクラス派生セレクタ<内部スタイルシートIDセレクタ<内部スタイルシートID派生セレクタ<インラインスタイル...合計12個の優先度
この問題を説明するには、次の例を参照してください.
<style type="text/css">
div { color: #00FF00 } /* */
.a1 { color: #0000FF } /* */
.a1 div { color: #00FFFF } /* */
.a2 { color: #FF0000 } /* */
#a2 { color: #FFFF00 } /* */
#a2 div { color: #FF00FF } /* */
</style>
<div> ， </div>
<div class="a2"> ， </div>
<div class="a2" id="a2"> ，ID </div>
<div class="a1">
<span> ， </span>
<div> ， </div>
<div class="a2"> ， </div>
<div id="a2">
<span> ，ID </span>
<div> ，ID </div>
<div class="a1"> ，ID </div>
<div class="a1" id="a1"> ，ID ID </div>
<div class="a1" id="a1" style="color:#000000;"> ， </div>
</div>
</div>
</code></pre>
<p><br/> ：</p>
<p> </p>
<p> </p>
<p> </p>
<p> ， ， Class ， ：</p>
<p><strong> class， （ ）， !important ！</strong></p>
<pre><code>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title/>
<style type="text/css">
.a2 {
font-size: 18pt;
color: #0000FF!important;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
</style>
<br/>
<span class="a1">a1</span><br/>
<span class="a2">a2</span><br/>
<span class="a2 a1">a2 a1</span><br/>
<span class="a1 a2">a1 a2</span><br/>
</code></pre>
<p><br/> ：</p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>