css6種選擇器

前端六種Css選擇器

1、標籤選擇器
標籤選擇器，此種選擇器影響範圍大，一般用來做一些通用設置，或用在層級選擇器中。
舉例：

div{color:red}
…

<div>這是第一個div</div>   <!-- 對應以上樣式 -->
<div>這是第二個div</div>   <!-- 對應以上樣式 -->

2、類選擇器
通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：

.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
…

<div class="blue">....</div>
<h3 class=" big">....</h3>
<p class="box">....</p>

3、層級選擇器
主要應用在標籤嵌套的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器,它可與標籤選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用範圍。
舉例：

.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
…

<div class="con">
    <span>....</span>
    <a href="#" class="pink">....</a>
    <a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>

4、id選擇器
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設置項只能對應於頁面上一個元素，不能複用，id名一般給程序使用，所以不推薦使用id作爲選擇器。
舉例：

#box{color:red}
…

<p id="box">這是一個段落標籤</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
<p>這是第二個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名 -->
<p>這是第三個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名  -->

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、僞類選擇器
常用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態。

.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}