忍者ブログ

からすまる日誌

20191113_03 セレクタの点数

×

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

20191113_03 セレクタの点数

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

#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

コメント

ブログ内検索

カレンダー

03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30