知っておきたいCSSの優先度
スタイルの優先度のルール
読み込んだHTML内のメディア指定のCSS
↓ない場合
読み込んだHTML内のもの->ブラウザにユーザーが設定したもの->ブラウザデフォルト
※HTML内でインライン指定されていれば以下を再優先
↓上記の中で
セレクタの優先度を計算する
↓重なった場合
後から読み込んだものを優先
セレクタの優先度の計算方法
セレクタには優先順位があり、点数を加算した結果、高得点のものが適用される。
点数が同じならば、後に書いたスタイルが優先される。
※但し桁を超えて適用されることはない（2015/11/13追記）
コメントに頂いたようにバージョン的に考えたほうが理解しやすいかもしれません
点数計算のやり方を以下に記述する
以下の点数を加算していく
| セレクタ | 例 | 点数 |
|---|---|---|
| 全称セレクタ | * | 0 |
| タイプセレクタ | p | 1 |
| 擬似要素 | :first-child | 1 |
| - | - | 超えられない壁 |
| 擬似クラス | [type="text"] | 10 |
| classセレクタ | .fugafuga | 10 |
| - | - | 超えられない壁 |
| idセレクタ | #piyopiyo | 100 |
| - | - | 超えられない壁 |
| 要素に直書き | style="" | 1000 |
計算例
| 例 | 計算 | 合計点 |
|---|---|---|
| style="" | 1000(style属性) | 1000点 |
| #hoge | 100(ID属性) | 100点 |
| .a.b.c.d.e.f.g.h.i.j.k | 10(クラス属性) * 11 | 110点 ※（2015/11/13追記）クラス属性をいくら集めてもID属性の１００点を超えられない |
| li.color.label | 1(要素名) + 10(クラス属性) + 10(クラス属性) | 21点 |
| table tr td.color | 1(要素名) + 1(要素名) + 1(要素名) + 10(クラス属性) | 13点 |
| div + *[href$="com"] | 1(要素名) + 0(全称セレクタ),+ 10(擬似クラス) | 11点 |
| h1 div + span | 1(要素名) + 1(要素名) + 1(要素名) + 10(クラス属性) | 3点 |
| li:last-child | 1(要素名) + 1(擬似要素) | 2点 |
| li:last-child | 1(要素名) + 1(擬似要素) | 2点 |