偽類選取器 ( 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
有幾個自己紀錄的一些注意的點:
:link
,主要是設定 a 連結未被點擊時的樣式,但因也可以直接在 a 連結上直接設定樣式,因此較少使用到,需注意 :link
是設定有 href 屬性的元素上才有效果,像是 <a> <area> <link>
,因此若使用在 <button>
是無效的::placeholder
在某些情況也是偽類:nth-child(n)
,初學時常常會有選取不到的情形,因是要從幾個都是相同的元素選取特定的某個元素,例如想要選擇偶數的 li,並想將 li 裡面的 h2 設定不同樣式,常會在順序上沒搞清楚,寫成 li h2:nth-child(2n)
,結果設定的樣式沒有顯示,因爲 li 中的 h2 只有一個,而不是有很多個相同的 h2 ,因此雖然想要設定的是 li 裡面的 h2,但是要從多個相同的 li 選取特定,因此應該是 li:nth-child(2n) h2 {...}
參考資源:
Pseudo-classes - CSS: Cascading Style Sheets | MDN
Selectors Level 3
30個你必須記住的CSS選擇器
::placeholder | CSS-Tricks
重新認識 CSS - Pseudo-class (偽類) (1) | Titangene Blog
重新認識 CSS - Pseudo-class (偽類) (2) | Titangene Blog
常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天