今天要來介紹的是Pseudo Classes，可以用來改變元素在某個狀態下的樣式，例如鼠標停留在button上時的樣式變化，checkbox被選取時的樣式等。

基本語法：

在選擇器與pseudo-classes間透過冒號作連結

常用類別

1. first-child: 父元素內第一個子元素
2. first-of-type: 第一個出現在父元素下的該標籤
3. last-child: 父元素內最後一個元素
4. last-of-type: 最後一個出現在父元素的該標籤
5. nth-child(): 開頭數來第n個子元素，n可以帶入數字、奇偶數或是公式
6. nth-last-child(): 結尾數來第n個子元素，n可以帶入數字、奇偶數或是公式
7. nth-of-type(): 屬於該標籤裡開頭數來第n個子元素，n可以帶入數字、奇偶數或是公式
8. nth-last-of-type(): 屬於該標籤裡結尾數來第n個子元素，n可以帶入數字、奇偶數或是公式

-a tag

1. active: 被觸發當下的樣式
2. hover: 鼠標經過時的樣式
3. visited: 被點擊過的樣式

-input

1. focus: 選擇到該input時的樣式

-radio/checkbox/option

1. checked: 被選擇到的樣式

Challenge