Topテクニックメモスタイルシートネタ > スタイルの優先順位

スタイルの優先順位

CSSは基本的に下に書いたものが優先されます。
イメージとしては上で書いたものが下で書いたものに上書きされる感じです。
たとえば、同じ要素に違った形でスタイルを設定してたらどうなるのでしょう?


<div id="mainbox">

<ul class="maincol">

<li>

<span class="subcol">設定される色</span>

</li>

</ul>

</div>


■「設定される色」は、色をこれだけのパターンで設定できます。
#mainbox span{color:red;}
.maincol span{color:blue;}
li span{color:black;}
.subcol{color:green;}
span{color:yellow;}


ここで表示されるのは、#mainbox span{color:red;}です。
それは何故かというと、スタイルの設定は、セレクトを並べると加算されていくからです。
ちなみに点数は以下になります。

*(全称セレクタ)0ポイント

p,h1 などのタグ1ポイント

.sample(class)10ポイント

#sample(ID)100ポイント

「スタイルの優先順位」関連本

Akasa Rira
みつけたきせき