CSSは「点数」を持っていて、「優先順位」が生まれる

通常CSSで書いた命令は、下に書いたものが優先されます。

例えば下記のようなHTMLファイルがあったとします。

<section class="contents">
    <h1>就職 咲子　ポートフォリオ</h1>
</section>

「就職 咲子　ポートフォリオ」という文字に色（#ff0000 赤）を付ける命令をしたとします。

.contents h1{
    color: #ff0000;
}

このように表示されますよね → 就職 咲子　ポートフォリオ

ところが間違えて、もう一度下に同じ場所に同じく文字の色（#d92477 ピンク）を命令をしたとします。

.contents h1{
    color:#ff0000;
}
・
・
・
・
・
.contents h1{
    color:#d92477;
}

この場合は下に書いたピンク色（#d92477 ピンク）が反映され、文字の色はピンク色に表示されます。

このように表示されます → 就職 咲子　ポートフォリオ

基本的にはCSSは下に書いたほうが優先されるということです。
ただ、そうではない場合もあります。
たとえばこんなとき。

そうだ！
やっぱりh1にclass名をつけよう！

<section class="contents">
    <h1 class="title">就職 咲子　ポートフォリオ</h1>
</section>

と、こんなふうにHTMLを変えました。

そうだ！
文字の色はやっぱり青（#252cd9）がいい！

こう思って下記のようなCSSを書き足しました。
元々書いていたものを消さずに、下の方に書き足したとします。

.contents h1{
    color:#ff0000;
}
.contents h1{
    color:#d92477;
}
・
・
・
・
・
.title{
    color:#252cd9;
}

本来であれば一番下のCSSが効いているはずですが、プレビューで表示されているのはピンク色（#d92477）です。

このように表示されます → 就職 咲子　ポートフォリオ

これは「CSSには持ち点があって、たとえ下に書いていても持ち点が負けていれば上の命令が反映される」というルールがあるからです。

.contents h1　の持ち点は11点
.title　の持ち点は10点

1点差で負けているのです。

持ち点の計算はこちらのサイトが便利
計算ツール http://specificity.keegan.st/

CSSを命令したときに反映されていない場合は「検証」でしっかり確認しましょう。

下に書いたはずのものが、斜線が引かれているということは、優先順位が負けているということです。
「あれ、指定したのに反映されていない！？」と思ったら点数を確認してみましょう。
はじめは何度もこれに躓くかもしれませんが、慣れてくれば優先順位が同じか勝つような書き方ができます！

おまけ。
昔のウェブサイトでよく見かける、点数の計算が大変なCSSの書き方…

section div.contents h2.subtitle{
}

何点やねん。となりますね。

以上、CSSの点数と優先順位のおはなしでした。