セレクタは点数制を持っている。
同じ点数の場合は「下に書かれている方」が優先、
「点数が高ければ」上に書いてあっても優先、
同じ場所を示す「同じセレクタが複数ある」と下が優先。「要素が異なると追加」になる。
→教科書参照のこと
#logo{
color:#f00;
background-color:#0f0;
}
#logo{
color:#00f;//上書きされる
width:500px;//上の内容にさらに追加される
}
↑こう書いた場合、実際は次のように実行される
color:#00f;
background-color:#0f0;
width:500px;
がlogoに適用される。
複数セレクタ
h1,p,li{
}
このクラスタの点数は「3点」じゃなくそれぞれ1点。
子孫セレクタ
header h1{
}
なら「2点」。
<div class="a"></div>
これを指定したいときは
div{}//1点
.a{}//10点
div.a{}//aというクラス名がついたdiv。11点
全称セレクタは0点
隣接セレクタについて
<ul>
<li></li>
<li></li>//ここ
</ul>
li+li{}の指定はここ↑だけになる。
>隣接セレクタは、要素と要素が直接隣接している場合(直後の弟)に適用されるセレクタです。
<ul>
<li></li>
<li></li>//ここ
<li></li>//ここ
</ul>
li+li{}の指定はここ↑になる。
Jクエリーでの指定の仕方もCSSと一緒なので、覚えるとできることが広がるらしい。
疑似クラス
a:hover{
}
この「:hover」の部分が疑似クラスになる。