本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

如果有在跟金魚系列的朋友，到目前為止一些基本的選取方式大概都看完了，前面我們從基本的 Tag、class、ID、屬性(Attribute Selector )、親代選取、後代選取(Descendant combinator)、子代選取(Child combinator)，到後面提到個選取器之間的觀念、搭配應用與 CSS scope 的部份，接下來要介紹的會是 CSS 選取器中最大一類的選取器 - 偽類選取器(pseudo-class)。

偽類選取器的特性

從語法結構上面來看，偽類選取器是由單一一個「:」冒號作為開頭，接著緊接著偽類選取器的名稱，例如 :hover 或是 :first-child 或 :nth-child，偽類的原文是 pseudo-class ，如同 CSS class 一樣都屬於 class 的一種，如果說 class 是自訂的分類的話，那麼 pseudo-class 就是 CSS 本身就提供的分類，所以我們也能直接想成偽類(pseudo-class)就是一種 CSS 內建的分類選取器，也因為偽類 (pseudo-class) 本身就是一個 class 的類型，相對的他的優先權也就跟 class 是一樣的。

偽類的子分類

偽類既然說是 CSS 中內建的一種分類選取器，又說偽類選取器是 CSS 選取器中最大的一個分類選取器， 那到底有多少的偽類，又是否能夠做個簡單的區分呢? 既然你都誠心誠意的發問了.....(住口! 這梗玩過了!) 那我們就簡單地把它區分成以下幾種子分類好方便學習跟了解。

1. 狀態分類選取
2. 順向選取
3. 逆向選取
4. 空值選取
5. 獨子選取

每一種偽類選取器都有他特殊的選取技能與功用，是一個絕對必學的 CSS 選取器喔，在接下來的文章中，我們除了會介紹偽類選取器之外，還有另外一個跟偽類選取器的宣告很相似的東西，他是採用兩個「::」冒號，只要看到兩個冒號的，別懷疑! 他就是看起來很像實際上卻毫無關係的偽元素(pseudo-element)，同樣的偽類與偽元素都是前端開發必備的好東西阿，所以又是被列為必學的一個特殊物件了(話說目前好沒有提到過哪個 CSS 選取器可以省略，笑)

以上就是今天的 金魚都能懂的 CSS 選取器 - 僞類選取器 - 何謂僞類選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～(這應該是金魚系列中最短的一篇文章了)

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學