CSSの優先順位

CSSは、書いても思い通り適用されない、複雑になるというイメージがある。

確かに複雑なのだが、少しだけ救われるヒント。

・基本的には、後に書いたもの、読み込まれたものが優先される。

・CSSはポイント制になっており、ポイントに従って適用される優先順位が変わる。

[ポイントについて]

 <div id="section-a" class="section-block">こんにちは</div>

という要素があるとして、

1.タグ(divなど)での指定は1ポイント

 例)

 div {

    color: #F00;

}

2.クラスでの指定は10ポイント

例)

.section-block {

    color: #0F0;

}

3.IDでの指定は100ポイント

例)

#section-a {

    color: #00F;

}

上記3つがすべてCSSに指定されていたら、書かれた順(読み込み順)に関係なく、文字色は最高ポイントを持ったスタイルが適用され、青くなる。

これらを踏まえて、、

div.section-block {

    color: #FF0;

}

 のようなセレクタ指定では、1 + 10 = 11ポイント。

.section-block#section-a {

    color: #0FF;

}

のようなセレクタ指定では、10 + 100 = 110ポイントとなる。

後に書かれていても、ポイントが高い方に書かれているスタイルが適用される。

また、ポイントが同じスタイルが存在した場合は、後に書かれている(読み込まれている)スタイルが適用される。

それでもやはりCSSは複雑なのだが、知ってると少しはマシになるだろう。