關於偽類 ( pseudo-class )

第 12 屆 iThome 鐵人賽

DAY 29

自我挑戰組

學習 HTML / CSS 遇到的問題系列第 29 篇

12th鐵人賽

hsin yu

2020-10-14 22:33:05

1231 瀏覽

分享至

偽類選取器 ( pseudo-class ) 或是也被稱為擬態選擇器，可以用來設定 HTML 元素在特定狀態的樣式，最常使用的就是:hover，可以設定滑鼠游標移至元素上時的樣式，製作選單或按鈕時很常使用

偽類選取器相較於偽元素多了許多，這邊列出幾個看過的，其他可參考 Pseudo-classes - CSS: Cascading Style Sheets | MDN
以下為 MDN 列出的部分偽類選取器

		
		:active
		:checked
		:default
		:defined
		:disabled
		:empty
		:enabled
		:first
		:first-child
		:first-of-type
		:focus
		:focus-within
		:hover
		:indeterminate
		:invalid
		:lang()
		:last-child
		:last-of-type
		:link
		:not()
		:nth-child()
		:nth-last-child()
		:nth-last-col() 
		:nth-last-of-type()
		:nth-of-type()
		:only-child
		:only-of-type
		:placeholder-shown 
		:read-only
		:root
		:target
		:valid
		:visited
        ...

根據 W3.org ，Selectors Level 3可將眾多的偽類選取器分成六類：

Dynamic pseudo-classes （動態偽類）
The target pseudo-class （目標偽類）
The language pseudo-class (語言偽類）
The UI element states pseudo-classes（ UI 元素特定狀態的偽類 ）
Structural pseudo-classes （結構化偽類）
The negation pseudo-class （否定偽類）

關於這些偽類的詳細的介紹可以參考
重新認識 CSS - Pseudo-class (偽類) (1) | Titangene Blog
重新認識 CSS - Pseudo-class (偽類) (2) | Titangene Blog

有幾個自己紀錄的一些注意的點：

雖然有區分偽類是單個冒號、偽元素是雙個冒號的寫法，但是因 W3C 規範在早期沒有這樣的區別，因此偽元素寫成一個冒號，也會被瀏覽器接受
自己是不常注意到底是幾個冒號，某天發現自己寫的和其他人不一樣，才在偽元素的文章中看到說明
因偽類選取器 ( pseudo-class ) 本身就是一個 class，因此權重和 class 相同
其中的 :link，主要是設定 a 連結未被點擊時的樣式，但因也可以直接在 a 連結上直接設定樣式，因此較少使用到，需注意 :link 是設定有 href 屬性的元素上才有效果，像是 <a> <area> <link>，因此若使用在 <button> 是無效的
::placeholder 在某些情況也是偽類
參考 ::placeholder | CSS-Tricks
在 hover 以外自己有機會使用到的是結構化的偽類，像是:nth-child(n)，初學時常常會有選取不到的情形，因是要從幾個都是相同的元素選取特定的某個元素，例如想要選擇偶數的 li，並想將 li 裡面的 h2 設定不同樣式，常會在順序上沒搞清楚，寫成 li h2:nth-child(2n)，結果設定的樣式沒有顯示，因爲 li 中的 h2 只有一個，而不是有很多個相同的 h2 ，因此雖然想要設定的是 li 裡面的 h2，但是要從多個相同的 li 選取特定，因此應該是 li:nth-child(2n) h2 {...}