2016/11/18
CSSの優先順位
CSSの各セレクタには以下のような点数が存在し、点数の高いものが優先されます。
また、同点数の場合は、後に書かれたもの（下に書かれたもの）が優先されます。
| 全称セレクタ（*） | 0点 |
|---|---|
| タイプセレクタ（p、h1 など） | 1点 |
| 擬似要素（::before など） | 1点 |
| 擬似クラス（:hover など） | 10点 |
| classセレクタ（例 .menu） | 10点 |
| idセレクタ（例 #footer） | 100点 |
| htmlに直書き（例 style="color:#333"） | 1000点 |
| !important宣言（例 .sub{margin:0 !important;}） | 最優先 |
具体的には、次のように点数を合計して優先順位が決定づけられます。
| .list | 10点 |
|---|---|
| p.list | （1＋10）＝ 11点 |
| .list p | （10＋1）＝ 11点 |
| div.list span | （1＋10＋1）＝ 12点 |
| .list li a | （10＋1＋1）＝ 12点 |
| #list .menu | （100＋10）＝ 110点 |
| ul#list li.menu a | （1＋100＋1＋10＋1）＝ 113点 |
※点数の桁は繰り上がりません。たとえばclassセレクタ（10点）を11個重ねても、idセレクタ（100点）ひとつには勝ちません。
