【CSS(style)の適応順序】どれが優先されるかについて、CodePenで実際にかいてまとめてみた

CSSの適応順序は、詳細度の概念に基づいて決まっています。

詳細度の概念
詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。詳細度は異なる順のセレクタで構成されるマッチング規則にのみ基づきます。
参照元：詳細度 - CSS | MDN

折角なので、自分の勉強も兼ねて
CodePenで実際に書いてみながらまとめてみました。
「HTML」や「CSS」をポチポチ押しながら、記載内容をご確認下さい。

#一般的な適応順序

##CSS内での記載順の関係
CSS内に同じ要素名・クラス名等の記述があった場合は、一番最後に記述されたstyleが適応される

See the Pen CSS適応順序資料_同一CSS内での記載順の関係 by kako3 (@kako3) on CodePen.

##要素名とクラス名の関係
CSS内に要素名とクラス名の記載があった場合は、
クラス名が適応される

See the Pen CSS適応順序資料_同一CSS内でのクラス名と要素名の関係 by kako3 (@kako3) on CodePen.

##クラス名とid名の関係
CSS内にid名とクラス名の記載があった場合は、
id名のstyleが適応される

See the Pen CSS適応順序資料_classとidの関係 by kako3 (@kako3) on CodePen.

##HTMLのstyle要素とCSS内での記載の関係
HTMLの”style”要素とCSS内に同じ要素名・クラス名の記載があった場合は、
HTMLの”style”要素に記載されたstyleが適応される

See the Pen CSS適応順序資料_HTMLのstyle要素とCSS内での記載順の関係 by kako3 (@kako3) on CodePen.

##インラインスタイルと外部CSS等の関係
HTMLの”style”要素やCSS内に同じ要素名・クラス名の記載とかが色々あったとしても、
HTMLの要素に対してstyleを直書きして付与した（インラインスタイル）がものが最優先で適応される。

See the Pen CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係 by kako3 (@kako3) on CodePen.

##インラインスタイルと外部CSS等の関係(js編)
HTMLの”style”要素やCSS内に同じ要素名・クラス名の記載とかが色々あったとしても、
HTMLの要素に対してstyleを直書きして付与した（インラインスタイル）がものがあったとしても、
jsで要素に直接付与したスタイルが最優先で適応される。

See the Pen CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係_js編 by kako3 (@kako3) on CodePen.

#例外が混ざってる場合の適応順序
ここからは、全ての優先順位のルールを覆す”!important ”の破壊力をお楽しみください。

##CSS内での記載順と!importantの関係
CSS内に同じ要素名・クラス名の記載があったとしても、
”!important ”を記載すると、記載したものが最優先で適応される

See the Pen CSS適応順序資料_同一CSS内での記載順と!importantの関係 by kako3 (@kako3) on CodePen.

##HTMLのstyle要素とCSS内での記載と!importantの関係
HTMLの”style”要素とCSS内に同じ要素名・クラス名の記載があった際も、
CSS内に”!important ”を記載すると、記載したものが最優先で適応される

See the Pen CSS適応順序資料_HTMLのstyle要素とCSS内での記載と!importantの関係 by kako3 (@kako3) on CodePen.

##インラインスタイルと!importantの関係
HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）としても、
CSS内の!importantの記載の方が適応される

See the Pen CSS適応順序資料_!importantとインラインスタイルの関係 by kako3 (@kako3) on CodePen.

##インラインスタイルと!importantの関係(js編)
HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）としても、
jsでそれを上書き下としても、
CSS内の!importantの記載があったら、そっちの方が最優先で適応される。

See the Pen CSS適応順序資料_!importantとインラインスタイルの関係(js編) by kako3 (@kako3) on CodePen.

「jsの記載はあってるのに反映されてない・・・」なんてこともありますよね。。。 そんな時は、ひとまず”!important ”がどこかで悪さをしてないか確認することも大切かと思います。

##!importantの記載順の関係
CSS内に同じ要素名・クラス名の記載があり、
!importantが複数ついてしまった場合は、
一番最後に記載された!importantのついてるものが適応される

See the Pen CSS適応順序資料_!importantの記載順の関係 by kako3 (@kako3) on CodePen.

”!important ”地獄にハマったら、
とにかく上書きに上書きを繰り返して対応するという
涙ぐましい労力がかかるので、辛いですよね。。。

---

2018/04/04 追記：
インラインスタイルと!importantの関係(js編)　追記しました。
また、公開済みのCodePen側の記載も一部修正を加えています。

---

※更新の時間ができ次第、順次追加予定※
※おかしなところがあったら、ご指摘頂けると嬉しいです※