CSSのスタイル適用の優先順位について

CSSのスタイル適用には,優先順位があることを先日知った。
 

セレクタの種類による優先順位

基本的には後から読み込まれたスタイルが優先されて適用されるが,それは獲得ポイントが同じであった場合に限る。
実は,セレクタの種類によって「ポイント」というものが割り振られており,この「ポイント」をより多く獲得しているスタイルが優先して適用される。
 

セレクタごとのポイント

ポイントの獲得は,id,classなどのセレクタによって行われる。

セレクタ ポイント
id 100
class 10
p,h1などの要素 1
*(全称セレクタ) 0

 

ポイント獲得の例

/* 100ポイント */
#sample {}

/* 10ポイント */
.sample {}

/* 1ポイント */
p {}

/* 0ポイント */
* {}

/* 110ポイント */
.sample #sample {}

/* 12ポイント */
p #sample li {}

 
 
以上
 
 
参考
CSSの優先順位~CSSテクニック~

Article written by

コメントを残す