今更ですがCSSの優先順位について

フロントエンド初心者ですがCSSの優先順位でハマってしまったので

後から書いたものが優先

まずは基本的な所から、おそらく少しでもCSSに触れたことのある人は知ってると思いますが同じプロパティに重複して書き込んだ場合は後から書いたものが適用されます。

h1 {
color: red;
}

/* こっちが優先 */
h1 {
color: blue;
}

このあとポイントの概念を説明しますが、ポイントが同じなら後から書いたものが優先されます

セレクタのポイント

実はこれを知らなくて悩んでたんですが、セレクタには優先順位を決めるポイントがあります。
各セレクタのポイントは以下のようになります。

セレクタ	例	ポイント
インライン	<p style="color: red;" ...	1000
id	#id { color: blue; }	100
class, 擬似class	.class { color: green }	10
エレメント, 擬似エレメント	p { color: yellow }	1

ここでの擬似classとは:hoverみたいなもので、擬似エレメントは::afterみたいなやつです。
この総合ポイントが高いものが優先されるようです。

hoge.html

/* 1000ポイント */
<h1 style="color: red;">赤色だよ</h1>

<p id="sample" class="hoge fuga">黄色だよ</p>

fuga.css

/* 100ポイント */
#sample { color: blue; }

/* 10 + 1 = 11ポイント */
.fuga p { color: green; }

/* 100 + 10 + 1 = 111ポイント */
#sample .hoge p { color: white; }

/* 100 + 10 + 1 = 111ポイント */
#sample .fuga p { color: yellow; }

111ポイントが二つありますが、後から書いたものが優先されるので黄色になりますね

*追記
ポイントというのは同じレベル内での話で、単純なポイントの足し算では優先度は決まらないようです。
いくらclassを増やしてポイントを増やしても、idやインラインが優先されるといった感じです。

/* ポイントは 0.0.13.0 */
.class .a .b ...(クラス１０個) { color: red; }

/* ポイントは 0.1.0.0 こっちが優先　　*/
#id { color: blue; }

コメントでご指摘いただきました、ありがとうございます！

!important

ここまでいくつか例を出してきましたが、とりあえずこれさえ付ければ最優先になってしまうものがあります、それが !important です。
ポイントとかありましたが、これを書いてしまえば問答無用でスタイルが適用されます(最終的にこれを使いました)
乱用はダメだと思います…

/* !importantは最優先！ */
p { color: red !important; }

フロントエンドは楽しいですね

参照

CSS優先順位の実例とまとめ