ちゃんと覚えておきたい！スタイルシートの優先順位のお話

CSSの指定がうまくいかなくて、「おかしいなー」と思っていたら
私はこの「優先順位」がわからなくて引っかかっていました。
スタイルシートの優先順位、慣れていないと、「どっちが上？」と迷ってしまいますね。
今日はCSSの優先度についてまとめてみました。

まずは基本の考え方からはじめてみます。

同じセレクタで指定した場合

たとえば、

<p><a href=”#”>文字列</a></p>　　にたいして

p{color:red;}
p{color:blue;}　　と、同じセレクタで指定した場合

文字列　　と表示されます。

これは、同等のセレクタでのスタイル指定に対して、
下に書いたスタイルが優先されているということになります。

もう少し細かく指定したらどうなるでしょうか

こんどは

<p><a href=”#”>文字列</a></p>　　にたいして

p a{color:red;}
p {color:blue;}

と「blue」に負けていた「red」の指定に「a」セレクタを足してみました。すると、

文字列　　という表示になります。

ここまででわかることは
・同等のセレクタの場合、下に書いたほうが優先される
・それ以上により細かくセレクタを指定したほうが優先される(ただし全てがそうとは限らない)

この基本の考え方を頭に入れつつ、次にいってみましょう！
(※2つ目の項目については後述します)

セレクタや指定方法によって優先度が違う

さっきは同じセレクタ指定の場合…で考えてみました
今度はこんな場合ならどうでしょうか？

<p id=”red”　class=”blue”>文字列</p>　　にたいして

#red{color:red;}
.blue{color:blue;}　　と指定してみます。

すると

文字列　　という表示になりました。

これは、クラス指定よりもID指定のほうが優先度が高いということですね！

このように、セレクタによって優先度を分けると以下のようになります

↑優先度高
ID「#」を使う(100点)
class「.」を使う(10点)
h1,pなどのタグ指定(1点)
全称セレクタ「*」を使う(0点)
↓優先度低

横についている点数で優先度が決まります。
指定しているセレクタの数と点数を計算し、点数が勝っているほうが
優先されます。

たとえばさっきのスタイル指定でいうと
#red{color:red;}　　（←IDを使ってるから100点)
.blue{color:blue;}　（←classを使ってるから10点)

結果＝点数の勝っているID指定の方が勝って文字が赤くなった

たとえば、同じIDを使っているとしたら…

#taneppa .tane p a {color:red;}(ID100点＋class10点＋タグ(p＋a)2点＝112点)
#taneppa .tane p {color:blue;} (ID100点＋class10点＋タグp1点＝111点)←一点差で負け！

ということでこのスタイル指定では上のスタイルが優先されることになります。
※最初の説明で「細かく指定したほうが優先される」と書いたのは、この「足し算形式」で点数が加算されたほうが優先される為です。
ですが、より強いセレクタ指定がきた場合は負けてしまうので注意しましょう。

※厳密に言うと、もう少し違う言い方になるのですが、分かりやすさ優先で書いています

もう少し詳しい考え方についてはこちらの記事がとっても参考になりました！
CSSに関する基本的なこと4（優先順位、セレクタの組み合わせ）
CSS HappyLifeさん