この記事は
なぜこのスタイルが効かないの！？
優先度があるってなんとなく知ってるけど詳しくは説明できない...
っていうことがよくあるので、CSSの優先度をまとめてみました。
メンテナンスしやすいコードを書くためにも、これを機に完璧に覚えないとという自戒をこめて。
はじめに
CSSはカスケーディングスタイルシートの略ですよね。
カスケーディングとは英語にすると滝の流れのような意味。
上流でスタイリングされたものは下流に引き継がれ、競合していたら上書きしたり優先度が高いものが引き継がれたり、、
それではCSS内部でどんな決まりを持ってスタイルされてるのか、まとめていきます。
大まかな優先順位
1. ユーザーが設定するスタイル !important付き
2. コーダーが書くCSS（stlye.css等) !important付き
3. コーダーが書くCSS（stlye.css等)
4. ユーザーが設定するスタイル 例えば、ブラウザ設定でユーザー自身がフォントサイズを自分の見やすい大きさに変えた場合など
5. ブラウザのデフォルトスタイル h1にすると勝手にフォントサイズが大きくなってたりpaddingが勝手についてたりすること
上から順番に優先度が大⇨小となります。
CSSでスタイリングするときに一番初めに
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; }
と書いたりしますよね。
これは５のブラウザデフォルトスタイルを３のコーダーが書くCSSで上書きしておいて不用意に５のスタイルが当たらないようにするため。
上記１〜５それぞれの中での優先度
上記１〜５の中でも優先度があります。
特に３のコーダーが書くCSS（例えばstyle.css）の中で、優先度が分からなくなることは経験した人も多いはず。
（私もスタイルを当ててるのに、検証ツールを見るとなんで打ち消されているの！？とよく泣きたくなりますw）
上記１〜５の中での優先度は、
1. インラインスタイル 例：<div style="color: red"
2. id
3. クラス、疑似クラス、属性セレクター
4. 要素、疑似要素
このような順番で優先度が付けられています。
これは詳細度というみたいですね。
（0, 0, 0, 0)で考えると分かりやすいかなと思います
例１ #contact a .button {color: green} の場合は、（0, 1, 1, 1) になります。
例２ a .button {color: red} 場合は、（0, 0, 1, 1) になります。
例３ a .button:hover {color: pink} の場合は、（0, 0, 2, 1) になります。
この例で同じ場所をスタイリングしたい場合、テキストカラーが当たるのは例１のgreenが当たることになりますね。
クラスが２個あっても100個あっても１つのidには敵いません。
左から見ていってidがあるのは例１だけなのでその時点で例１のスタイルが当たることとなります。
（ちなみに、グローバルセレクター*の詳細度は (0, 0, 0, 0) になります）
詳細度も同じだった場合
body {font-size: 16px}
p {font-size: 14px}
など、同じ詳細度になることもありますよね。
その場合はみなさんご存知の通り下に書かれたコードで上のものが上書きされます。
以上です。