設定網站的CSS樣式，可以使用很多種不同的選擇器。我們將其分為簡單及進階兩類。今天將帶大家介紹簡單的選擇器使用方式。
CSS選擇器類型介紹(簡單篇)
在Day8我們第一次使用了CSS來美化網站，當時我們想要調整標題的顏色，因此使用標籤選擇器來設定<h1>的風格。
但是今天如果你沒有要每個標籤都套用相同的風格，標籤選擇器就不會是你的選擇，那麼我們該怎麼辦呢?
以下將介紹常見的選擇器類型(簡單篇)。
以下範例，為了方便大家閱讀，我就不使用完整的HTML格式。若還不知道完整HTML格式的朋友可以參考Day4
標籤選擇器 (element Selector)
首先，再複習一下標籤選擇器。
假設今天希望網頁段落都用藍色的字體呈現，我們就可以針對<p>標籤來設定CSS樣式。此時，就是<p>的標籤選擇器。
p {
color: blue;
}
p為標籤名稱- color 用法為更換字體顏色，在CSS稱為屬性(Property)。
- blue 為字體顏色，在CSS稱為設定值(Value)。
以下為實際效果：
id選擇器 (id Selector)
有些情況，你不希望每個標籤的風格都一模一樣，此時你可以使用id選擇器。
用同樣例子來說明，今天只希望將第1個段落的字為藍色，我們可以在第1個<p>標籤加入id屬性並命名為p1。
設定屬性時，透過等號賦予屬性設定值，切記要加上引號。
<h1> 標籤選擇器</h1>
<p id='p1'>今天</p>
<p>我要教</p>
<p>選擇器</p>
接著，透過id選擇器將id為p1的標籤建立CSS樣式。
#p1 {
color: blue;
}
#p1用 # 字號 + id名稱，表示要對id為p1的標籤設定CSS樣式。
以下為實際效果：
若使用id選擇器，切記id的是獨一無二的，也就是說不能在其他標籤設定相同的id名稱。
類別選擇器 (class Selector)
與id選擇器的用途類似，主要差異是類別選擇器可以設定多個相同的名稱。
同上，假設今天希望除了第1個段落以外，其他段落都是藍色字體，我們可以在第2及3個<p>標籤加入class屬性並命名為p23。
<h1> 標籤選擇器</h1>
<p>今天</p>
<p class="p23">我要教</p>
<p class="p23">選擇器</p>
接著，透過類別選擇器將class為p23的標籤建立CSS樣式。
.p23 {
color: blue;
}
.23用 . 符號 + 類別名稱，表示要對類別為p23的標籤設定CSS樣式。
以下為實際效果：
由於不同類型的標籤，皆可設定相同類別名稱。因此，也可以這樣設定CSS，以特別表示類別名稱為的p23的<p>標籤。
p.p23 {
color: blue;
}
一個標籤也可以有多個類別名稱。如；
<p class="p2 p3">我要教</p>。該標籤同時有p2、p3的類別名稱。
通用選擇器 (Universal Selector)
今天如果希望所有標籤都有相同效果。比如，都要呈現藍色的字體，那麼可以使用通用選擇器。
* {
color: blue;
}
* 代表所有的標籤。
群組選擇器 (Grouping Selector)
今天若只希望部分標籤呈現相同效果時，如<h1>、#p1、.p23都呈現藍色的字體，那麼可以使用群組選擇器。
h1, #p1, .p23{
color: blue;
}
主要透過逗號，將要有相同效果的選擇器組合在一起。
總結
今天帶大家使用幾個簡單CSS選擇器，來建立網站樣式。 大家可以先動手練習一下，下一篇將帶大家使用進階版的CSS選擇器。