[遠位研究ノートのday20] 3.4。のCssセレクタタグセレクタ+ ID +セレクタ+ +クラスセレクタレベルセレクタセットセレクタ+ +擬似クラスと擬似要素セレクタ

3.4。CSSセレクタ

CSSセレクタ

一般的な選択は、次のカテゴリがあります。

図1に示すように、タグセレクタ

タグセレクタ、大規模のこの選択の影響は、階層セレクタで使用することをお勧め。
例えば：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2、IDセレクタ

項目はプログラムのみを使用するID全般、再利用することはできませんページ上の要素に対応するスタイルを設定することができるようにid名により、選択要素は、要素のid名は、繰り返すことはできません、それは、セレクタとして使用するIDにはお勧めしません。
例えば：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

図3に示すように、クラスセレクタ

クラス名で要素を選択し、クラスは複数の要素に適用することができ、要素は複数のクラスにも使用することができる、柔軟な、再利用可能な、最も広くCSSセレクタの一種です。
例えば：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4、レベルセレクタ

サブ要素の親要素を選択するのに使用されている、次のサブ要素またはサブ要素は、要素も名前の競合を防ぐことができます名前階層を減らすために、ラベルと組み合わせることができます。
例えば：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

図5に示すように、グループセレクタ

複数のセレクタは、同じスタイル設定場合、グループセレクタを使用することができます。
例えば：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

図6に示すように、擬似クラスと擬似要素セレクタ

一般に使用される疑似クラスの選択は、マウスホバーは、要素の上、ダミーセレクタ要素は前に持って後、それらはスタイル要素の内容を通って挿入することができるときの状態を示し、ホバー有します。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>