CSS セレクタの優先順位 (!important)

どのCSSが最終的に適用されるかを決めるルールです。

以下の表は、上から順に優先度が高い（強い）設定です。

CSSのセレクタには、どのスタイルを適用するかを決定するための詳細度（Specificity）という優先順位のルールがあります。

同じ要素に対して複数のスタイルが指定された場合、ブラウザはこの詳細度を計算し、より高いスコアを持つルールを採用します。

以下は、MDNの詳細度の概念のリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

CSSで後に記述されたものが適用されます(後勝ち)。

.box { color: red; }
.box { color: blue; } /* 勝つ */

組み合わせて詳細度が上がる場合、優先度が高くなります。

#content .box p { }

#content → IDセレクタの1
.box → classの1
p → 要素の1
あわせると→0-1-1-1

優先度を無視して!importantがある箇所の優先度が一番強くなります。

p { color: red !important; }

important同士では優先順位比較が復活し後勝ちになります。

１．!importantがついていないか？

２．インラインスタイルで書いていないか？

３．詳細度（ID数＞クラス数＞要素数）はどちらが高いか？

４．すべて同じなら、より下に記述されている方が勝つ。