CSSの優先度（簡易版）

!important

!importantをつけたルールは優先されます
とても強いルールなので安易につけることは非推奨とされていますが、使い所を抑えておけばとても便利です

div { color: red !important; } /* こちらが適用される */
.class { color: blue; }

要素に直接スタイルを適用できる属性です
外部のスタイルを上書きするため後述する詳細度からも一弾飛び抜けて優先されます

<div style="color: blue;"><!-- こちらが適用される -->
  text
</div>

一般的なCSSセレクターによって適用される優先度です
ざっくりいうとより具体的な指定がされているルールが適用されます

これにもちゃんと計算方法があります

まずセレクターは種類ごとにランク分けされており、どれがより詳細であるかが決まっています

例えば以下のようにIDセレクターを使ったルールがある場合、クラスセレクターより詳細度が高いためIDのほうが適用されます

#id { color: red; } /* こちらが適用される */
.class { color: blue; }

そして同ランクの場合はより該当するセレクターが多いほうが優先されます

.parent .child { color: red; } /* こちらが適用される クラスセレクター × 2 */
.child { color: blue; } /* クラスセレクター × 1 */

セレクターの数まで一致している場合は後に定義されたルールが適用されます

.parent1 .child { color: red; }
.parent2 .child { color: blue; } /* こちらが適用される */

最後に一部のCSSは祖先要素から値を継承します。
だいたい文字に関わるCSSは継承されているようです。

<div class="parent">
  <div>
    Child
  </div>
</div>

.parent { color: red; }

<h1 id="id1" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">
  COLOR
</h1>

#id1 { color: red; }
.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11 { color: blue; }

赤色

詳細度はID セレクターのほうがより優先度が高い仕様なので、クラスをいくらつけたところでID指定には勝てません。

他のサイトだとIDは100点、classは10点という点数換算で詳細度を紹介しているところがありますがあれは正確ではありません。

<h1 id="id1" style="color: gray !important;">
  COLOR
</h1>

#id1 { color: red !important; }

灰色

style属性、idセレクターのどちらにも!importantがついているので次に優先度の高いstyle属性のほうが優先される

多分これが一番優先度が高いと思います

<h1 id="parent">
  <div class="child">
    <div>
      COLOR
    </div>
  </div>
</h1>

* { color: blue; }
.child { color: green; }
#parent { color: red; }

青色

COLORの文字列は#parentの直下でも、.childの直下でもない。
全称セレクター(*)は詳細度の範囲で、継承よりも優先度が高くなる

CSSの宣言は大きく３つの起源に分けられる

CSSの評価は大きく２つのアルゴリズムによって行われている

適用順序	アルゴリズム	内容
1	カスケードアルゴリズム	CSSの起源と重要度による適用
2	詳細度アルゴリズム	id, class, 要素

カスケードアルゴリズムでは以下のような優先度になっている。

!importantが優先されるのはそもそも評価タイミングが違うから！

基本的にはclassによってスタイルをつける
目的別にclassを用意しておけば変更も流用もしやすい。
classじゃ不都合なときに他のセレクターやstyle属性など適切なものを使えば良い
!importantはこれ以上のスタイルの変更が加わらない箇所でなら使ってよし
特に極々限定的なデザインのカスタマイズをする必要があるときに詳細度で頑張らなくて良い
逆にライブラリや汎用的なコンポーネント、詳細度の低いルールで!importantをつけてはいけない

それほど特別なことは無いです。
自分は今までもやっていたけど、仕様を調べたことでより納得感がましたと思います。

たいていのブラウザはF12キーを押すとdeveloper toolsが開きます。その要素（Element）タブでCSSを確認できます。

適当な要素をクリックするとその要素に関連するCSSルールがすべて表示されます。
その要素は詳細度の高い順に並んでいるため、上にあるCSSが適用されるとおぼえておくと良いでしょう

他にも上書きされたスタイル、ユーザーエージェントのスタイル、継承されたスタイいるなどの情報ものっています。

計算済み（Computed）には最終的に適用されたスタイルの一覧が表示されます。
分類する（Grouping）チェックを入れると関心の近いものが集まって表示されるのでおすすめです。
特定のプロパティを開くと関連するルールもすべて表示されます。（こちらも詳細度順）