iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 12
5

如果有在跟金魚系列的朋友,到目前為止一些基本的選取方式大概都看完了,前面我們從基本的 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可樂的網站/頻道享受精彩文章

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


上一篇
子代選取器 - 一個最安全且不會讓你株連九族的選取器
下一篇
常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

尚未有邦友留言

立即登入留言