CSSの優先順位

なんとなく理解していた気になっていたCSSの優先順位について（個人的には）今更まとめてみます。

記述による優先順位

/* 全ての要素に文字色黒 */
*{
color:#000000;
}

/* p要素に文字色赤 */
p{
color:#ff0000;
}

/* class『schweppes』要素に文字色緑 */
.schweppes{
color:#ff0000;
}

/* ID『orangina』要素に文字色青 */
#orangina{
color:#0000ff;
}

というようなCSSがあり、指定された全ての条件を持つ要素があった場合(pタグかつclassが『schweppes』かつID指定が『orangina』だった)、文字色は青になります。これはIDによる指定が一番優先順位として強いためですが、この優先順位は指定の方法によってポイント式になっているようです。

ID指定	100ポイント
class指定	10ポイント
要素指定(h1,div,p等)	1ポイント
アスタリスク指定	0ポイント

これらのポイントは加算式なので、以下のようなCSSでどちらの条件も含んでいる要素があった場合、

/* 110ポイント */
#orangina .schweppes{
color:#ffffff;
}

/* 101ポイント */
#orangina p{
color:#000000;
}

ID指定とクラス指定によってポイントが高くなった上のスタイルが優先されます。また、優先順位が同じだった場合は後から読み込まれるもの（一番下に書いたもの）が優先されます。
入れ子構造にして指定していくだけで反映されていたため、自分はあまり競合した事がなかったのでポイントを意識した事がありませんでした。今後複雑なCSSを書いていて思い通りに反映されない場合等はこのポイントを考慮して組んでいくと良さそうです。

CSSの記述方法による優先順位

CSSをどこに書くか（どこで読み込むか）でも優先順位が変わってきます。優先順位は以下の通りでした。
インライン(タグに直接書く) ＞ headタグ内(htmlに記述) ＞ 外部CSS
個人的に意外だったのはhtmlに記述するほうが外部CSSより優先順位が高かった事でした。外部CSSは後から読み込まれたほうが優先されるため、上書き式でhtml内に記述したものも上書きしてくれるのかなと思っていましたがそんな事はありませんでした。
見なおしてみると、状況は限られていますが思ったよりも落とし穴がありました。今後気をつけたいと思います。