タイプミスもなく正しくセレクタを指定しているはずなのに、CSSが反映されないんだけど、どうすれば…。
目を皿のようにして見直してもセレクタは正しく指定されているのに、CSSが思った通りに反映されない、そんな時。
Chromeのデベロッパーツール（検証機能）で確認
何はともあれ現状把握。
デベロッパーツールで、現在、適用されているCSSを特定！
適用したいCSSの優先順位を上げる
CSSは決められた優先順位で適用されます。
適用したいCSSの優先順位を、現在適用されているCSSより上げてみましょう！
まとめ：CSSの優先順位
See the Pen
Jjdygqq by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
↑のコードで、優先順位を確認したところ、こんな感じ↓になりました。
- !important → 一番強い指定。詳細度の点数も低く、読み込み順的には上書きされる位置なのにフォントは青（blue）になる。
- インライン記述 → ①を削除するとフォントは緑（green）になる。
- 詳細度の点数が高い → ①＋②を削除するとフォントは赤（red）になる。
- 読み込み順 → ①＋②＋③ を削除するとフォントは濃いピンク（deeppink）になる。
お手持ちのエディタでも試してみてくださいね！
