忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(16) セレクタの点数

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

序章(16) セレクタの点数

セレクタは点数制を採用している

同じ点数の場合は「下に書かれている方」が優先

「点数が高ければ」上に書いてあってもそっちが優先
同じ場所を示す「同じセレクタが複数ある」と下が優先
要素が異なると追加
 
→教科書参照のこと
 

#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」の部分が疑似クラスになる
PR

コメント

ただいまコメントを受けつけておりません。