CSSの優先順位

　CSSのセレクタ種類による優先順位についてまとめました。セレクタにはそれぞれ優先順位を決めるポイントが設定されています。（下のテーブル）そのポイントがより多いセレクタのスタイルが優先的に読み込まれるようになっています。ポイントの合計が同じ場合は、最後に読み込まれたスタイルが有効になります。
　また、複数のタグ、id、class、擬似要素を使い子孫関係で記述した場合は、各セレクタ、要素のポイントを加算し、そのポイントの合計が多い物を表示します。

セレクタの種類による優先順位
1.　「!important」を設定
p{ color:#ff0000 !important; }

2.　タグに直接styleを記述している
<p style=”color:#ff0000;”></p>
　
4.　idで指定
#test{ color:#ff0000; }

5.　クラス、擬似クラスを指定
.test{ color:#ff0000; }
[title=”test”]

6.　要素を設定
p{ color:#ff0000; }

7.　全称セレクタ「*」で指定
*{ color:#ff0000; }

セレクタのポイント
　各セレクタの優先順位を決めるポイントになります。擬似要素、セレクタを並用して使用する場合は、ポイントの合計を計算して、合計の多いスタイルを表示します。ポイントが同数の場合は、最後に読み込まれたスタイルが反映されます。ポイントの計算方法は、下記を参考にしてください。

ポイントの計算例
p #test ⇒ 1+100 = 101
p .test ⇒ 1+10 = 11
p[title=”test”] ⇒ 1+10 = 11
*[title=”test”] ⇒ 0+10 = 10
.test:first-child ⇒ 10+10 =20
p:first-child ⇒ 1+10 =11
div p ⇒ 1+1 = 2
div > p span ⇒ 1+1+1 = 3
body p:first-child ⇒ 1+1+10 =22

（感想）
　今まで、漠然とCSSを使っていた
仕組みを理解すると無駄な記述も減るし、サイト作成時のCSSの記述ルールも自ずと決まるな・・・