002---選擇器（標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器）

一、標籤選擇器

語法：（像p、div、hn....的標籤）

<p>標籤選擇器</p>

<style>
	p {
		color: green;
	}
</style>

效果展示：

                                

二、類選擇器

顧名思義，class本身就有類的意思，這裡表示具有相同class值的一類。

語法：

<p class="LEI">類選擇器</p>

.LEI {
	color: red;
}

效果展示：

                                 

一個class 的style樣式可以被多個標籤同時使用。

例如：

<p class="LEI">類選擇器111</p>
<p class="LEI">類選擇器222</p>

樣式與上一樣，那麼效果呢：

                                  

效果是一樣的。

注意：①使用類選擇器設定樣式的時候，類名前要有英語符號“.”。且命名要遵循命名原則。

          ②不要用純數字、漢字命名，且儘量不要用“_”下劃線，可以用“-”。

          ③儘可能有很好的可讀性。

三、多類名選擇器

一個標籤如果同時具有多個類名，那麼就會同時具有那些類名的樣式。

例如：

<p class="LEI F-size">多類名選擇器</p>

.LEI {
	color: red;
}
.F-size {
	font-size: 30px;
}

那麼效果與上面的作比較：

四、id選擇器

id選擇器就像一個人的身份證號，只有一個。所以，id樣式只能被一個標籤所使用，即只能被使用一次。

語法：

<p id="big">ID</p>

#big {
	color: orange;
	font-size: 100px;
}

效果如下：

五、萬用字元選擇器

語法：

* {
	margin: 0;
	padding: 0;
}

萬用字元選擇器對所有的標籤都有用，，但是優先順序較低，容易被覆蓋。其中使用最多的就是消除標籤外邊距和內邊距（清除瀏覽器的預設值，以便於自己設定自己所需要的）。

六、偽類選擇器

1. 連結偽類選擇器（只要針對於連結標籤   a）

語法：

<a href="#" class="aa">請點選</a>

a {
	color: #000;
}
.aa:hover {
	color: red;
}

前面的a樣式是給a標籤一個最初的顏色，以便分辨。（滑鼠經過前後對比）

                        

其他的類似。

但是，在定義樣式的時候，要注重上下順序，例如，如果hover在link的上面，那麼hover的效果就不顯示。

順序：link、visited、hover、active

2. 結構位置偽類選擇器（CSS3）

語法：

<ul>
	<li>11111</li>
	<li>11111</li>
	<li>11111</li>
	<li>11111</li>
</ul>

ul li {
	font-size: 30px;
	font-weight: bold;
}
ul li:first-child {
	color: red;
}
ul li:nth-child(2){
	color: orange;
}
ul li:nth-child(3){
	color: green;
}
ul li:last-child {
	color: purple;
}

效果展示：

注意事項：

① nth-child()括號裡還可以寫odd和even，分別表示奇數和偶數。例如：

ul li:nth-child(odd){
	color: green;
}

ul li:nth-child(even){
	color: orange;
}

② nth-child(kn+b)   k、b分別  係數和常數，如果k=2,b=0，那麼選擇的就是2的倍數；如果k=2,b=1，那麼就是比2的倍數多1的數。

3. 目標偽類選擇器