CSSのスタイル適用には，優先順位があることを先日知った。
セレクタの種類による優先順位
基本的には後から読み込まれたスタイルが優先されて適用されるが、それは獲得ポイントが同じであった場合に限る。実はセレクタの種類によって「ポイント」というものが割り振られており、この「ポイント」をより多く獲得しているスタイルが優先して適用される。
セレクタごとのポイント
ポイントの獲得はセレクタの種類によって行われる。優先度は上にあるセレクタが低く、下にあるセレクタが高い。アプリケーションのバージョン番号をイメージしてもらうと分かりやすいかもしれない。
| セレクタ | ポイント |
|---|---|
| *（全称セレクタ） | 0.0.0.0 |
| li（要素セレクタ） | 0.0.0.1 |
| [name="foo"]（属性セレクタ） | 0.0.1.0 |
| .foo（クラスセレクタ） | 0.0.1.0 |
| #foo（idセレクタ） | 0.1.0.0 |
| style=""（style属性に記述） | 1.0.0.0 |
ポイント獲得の例
/* 0.1.0.0ポイント */
#sample {}
/* 0.0.1.0ポイント */
.sample {}
/* 0.0.0.1ポイント */
p {}
/* 0.0.0.0ポイント */
* {}
/* 0.1.0.2ポイント */
p #sample li {}