はじめに

デベロッパーモードを確認しつつCSSをいじっていた時に自分があてたいと思っていたCSSが打ち消されてあたらないことがよくありました。元々優先順位があることはなんとなく知っていましたが、今回を機に優先順位（詳細度）を自分用にまとめることとしました。

↓今回はCSSの確認用に下記サイトを使用。
https://jsbin.com

詳細度とは

詳細度 (Specificity) は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

これは実際にスコアというか尺度を計算して優先度（詳細度）を決定しているみたいですね。

セレクターの種類と詳細度

セレクターが持つ詳細度の量は、4 つの異なる値（またはコンポーネント）を使用して測定されます。これは、1,000、100、10、1 のそれぞれの位として考えることができます。
「1,000」宣言が style 属性（別名、インラインスタイル）内にある場合、これがスコアされます。このような宣言にはセレクターがないため、その詳細度は常にシンプルに 1,000 です。
「100」全体のセレクターの内部にある ID セレクターは、これがスコアされます。
「10」全体のセレクターの内部にあるクラスセレクター・属性セレクター・擬似クラスは、これがスコアされます。
「1」全体のセレクターの内部にある要素セレクターまたは疑似要素には、これがスコアされます。

まとめ
1 → 要素型セレクター（h1 など）と擬似要素（::before など）
10 → クラスセレクター（.example など）、属性セレクター（[type="radio"] など)、擬似クラス（:hover など）
100 → ID セレクター（#example など）
1000　→ タグに直書き（例：<h1 style="color:red;">hoge</h1>）
セレクター一つに付き左の数字を足していく感じですね。
例
　div #hoge .hoge li .test{color:red;}みたいな感じで指定したとすると
　要素型セレクター　→　div と li で 0002
　クラスセレクター　→　.hoge と .test で 0020
　IDセレクター　　　→　#hoge で0100
全てを足すとスコア0122となります。

実際の例

1

コメントアウトされている部分がスコアになります。どちらも要素型セレクターのh1を指定していて、スコアはどちらも「0001」となります。（MDNにならって0埋めします。）
スコアが同じ場合後に書いた方が優先されますので（）、青色が適応された状態となっています。

2

スコアはIDセレクターで指定したものが「0100」で一番スコアが高いので、紫色が適応された状態となっています。

3

非常に適当にIDとクラスを付けたもので、継承などの知識も必要かもしれませんが、スコアだけで何故この色が適応されているのかはわかるかと思います。
また!importantは簡単にいえばスコアを無視して最優先にするものですが、これはまたの機会にします。

まとめ

まだまだ必要なことはあるかと思いますが、これを知っているだけでも少しCSSを書きやすくなったかと思います。