【CSS FAQ】偽元素 (pseudo element) 和偽類 (pseudo class) 差在哪?

有時候 CSS 裡會出現單冒號 (:) 和雙冒號 (::)
單冒號 (:) 是用在偽類
雙冒號 (::) 則是用在偽元素
而我們也把偽類和偽元素默默背起來
直到有一天,突然被問了一個問題
偽類和偽元素到底差別在哪?
又怎麼去做區分呢?
才發現好像講不太出來耶 XD

在開始之前… 請看這裡

在開始進入很容易看不懂的世界前,我想要先訴說我理解的方式。

  • 偽類 (pseudo class) 就是在選已經存在的東西,比方說 a:hover 就是選了已經存在的 <a> 的某一個狀態
  • 偽元素 (pseudo element) 就是在創造一個新的假元素,因為他不在 DOM 裡面,而是創造的了一個我們看不見的元素。比如說 ::first-line,第一行並沒有被任何的 tag 包住,所以在選取的過程就像是用了一個看不到的 tag 把第一行包起來,所以才選得到這行。

See the Pen CSS FAQ pseudo element by Candy (@stringpiggy) on CodePen.22914

偽類 (Pseudo Class)

W3C 百科裡面提到

Pseudo-classes are used to provide styles not for elements, but for various states of elements.

舉例來說一個超連結會有很多狀態像是滑鼠移到上面的 :hover,點下去的 :active 等,這些都是表示這個連結的狀態。前面這裡很好懂,至於 :nth-child() 等等不太像選取狀態樣子的選擇器怎麼也被歸類到偽類裡面來呢?

這時候就要看 W3C 的定義了

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

表示狀態的偽類我們應該很好理解,反正這個狀態不存在 DOM 裡面~
那後面的 “simple selectors” 到底再說啥!?所以首先要先知道哪些東西是 “simple selectors”,根據 W3C 我們得知有以下這幾種

  • type selector (h1, p, div)
  • universal selector (*)
  • attribute selector (img[alt])
  • class selector (.class)
  • ID selector (#id)
  • pseudo-class (:)

所以說只要是前面那幾種都選不到的東西,就是 pseudo-class 要去解決的問題。

偽元素 (Pseudo Element)

W3C 百科裡面提到

Pseudo elements differ from pseudo-classes in that they don’t select states of elements; they select parts of an element.

也就是說我們選的是這個元素的某個部分。比較需要注意的地方就是每一個選擇器只能使用一個偽元素。至於想要看詳細的定義可以到參考資料的連結裡面,都貼來這裡就沒意思啦~
常見的偽元素有

  • ::first-line:選取第一行
  • ::first-letter:選取第一個字
  • ::before:從選取元素的前面插入東西
  • ::after:從選取元素的後面插入東西(這兩句怎麼好像有點怪怪 der)
  • ::selection:選取文字反白後

(註解:第一行是「大家好!」不是「因家好!」唷 XD)

SP-CSS-pseudo-elements

See the Pen RapJEY by Candy (@stringpiggy) on CodePen.22914

結語

總之如果有些東西太抽象,其實會用就好了~知道自己要選什麼東西,對什麼東西進行操作就可以囉!這是之前被學生問到我才開始仔細思考的問題,現在就一併瞭解囉:)教學相長咩~

參考資料

Add comment

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Reader Favorites

Recent Posts

Categories

Tags