iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

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

關於偽類 ( pseudo-class )

  • 分享至 

  • xImage
  •  

偽類選取器 ( 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 {...}

參考資源:
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 人的一天


上一篇
關於偽元素 ( Pseudo-elements )
下一篇
關於使用 ID 及選擇 CSS 選取器
系列文
學習 HTML / CSS 遇到的問題 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言