css-スタイル優先度アルゴリズム

1.複数スタイル優先度
マルチスタイル(Multiple Styles):
外部スタイル、内部スタイル、およびインラインスタイルが同じ要素に同時に適用される場合は、複数のスタイルを使用する場合です.
一般的に、優先度は次のとおりです.
(外部スタイル)External style sheet
例外として、外部スタイルが内部スタイルの後ろに配置されている場合、外部スタイルは内部スタイルを上書きします.

   <style type="text/css">
     /*      */
     h3{color:green;}
   style>

    
   <link rel="stylesheet" type="text/css" href="style.css"/>

2.CSSスタイル優先アルゴリズムはどのように計算しますか?

インラインスタイルシートの重み値は最高1000です.

IDセレクタの重み値は100

である.

Classクラスセレクタの重み値は10

です.

HTMLタグセレクタの重み値は1

である.
1.css優先度
4つのレベルと各レベルの出現回数によって決定され、値は左から右、左の最大、1つのレベルが1つより大きい
2.優先度アルゴリズム
各ルールは初期4桁に対応します:0,0,0,0
ライン内のスタイルの優先度は、外部定義より1,0,0,0です.

sjweb

IDセレクタの場合は0,1,0,0をそれぞれ加算
クラス選択子、属性選択子、偽クラス選択子の場合は、それぞれ0,0,1,0を加算します.
エレメントセレクタ、擬似クラスセレクタの場合は、それぞれ0,0,0,1を加算します.
3.注意が必要
!importantの優先度は最も高いが、競合が発生した場合は「4桁」を比較する必要がある.
優先度が同じであれば、近接原則を採用する
継承されたプロパティの優先度が最も低い
4.インスタンス

body div p{color: green;}--Specificity  0,0,0,3
Div # sjweb { font-size:12px;}--Specificity   0,1,0,1
html > body div [id=”totals”] ul li > p {color:red;}--Specificity   0,0,1,6