セレクタは点数制を採用している
同じ点数の場合は「下に書かれている方」が優先
「点数が高ければ」上に書いてあってもそっちが優先
同じ場所を示す「同じセレクタが複数ある」と下が優先
要素が異なると追加
→教科書参照のこと
#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」の部分が疑似クラスになる