CSS中僞類和僞元素的差別

我們知道， CSS的元素選擇器除了根據id（#）、class（.）、屬性（[ ]）等來選取元素以外，還有很重要的一類，那就是根據元素的特殊狀态來選取元素。它們就是僞類和僞元素。

好多人分不清什麼是僞類，什麼是僞元素？主要原因是二者的結構和用法太過相似。其實 CSS3為了區分兩者，已經明确規定了僞類用一個冒号來表示的

（如:active，:hover等），而僞元素則用兩個冒号來表示（如::first-letter，::first-line等）。但因為相容性的問題，是以現在大部分還是使用統一的單冒号（:）。

那麼今天我們就從其語義角度來差別一下它們：

• 僞類

僞類在選擇元素時基于的是目前元素處于的狀态，或者說元素目前所具有的特性，而不是元素的id、class、屬性等靜态的标志。由于狀态是動态變化的，是以一個元素達到一個特定狀态時，它可能得到一個僞類的樣式；當狀态改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，是以叫僞類。

• 僞元素

不同于僞類針對特殊狀态的元素，僞元素是對元素中的特定内容進行操作，它所操作的層次比僞類更深了一層，也是以它的動态性比僞類要低得多。實際上，設計僞元素的目的就是去選取諸如元素内容第一個字（母）、第一行，選取某些内容前面或後面這種普通的選擇器無法完成的工作。它控制的内容實際上和元素是相同的，但是它本身隻是基于元素的抽象，并不存在于文檔中，是以叫僞元素。

補充說明： 在CSS中計算規則的特殊性時，我們會将選擇器的特殊性分成4個成分等級：a，b，c和d。

• 如果樣式是行内樣式，那麼a=1.
• b等于id選擇器的總數。
• c等于類，僞類和屬性選擇器的數量。
• d等于元素名選擇器和僞元素選擇器的數量。

注意：在這裡僞類和僞元素的優先級已經不一樣了。

常見僞類和僞元素一覽>>>

• 僞類有

:link

應用于未被通路過的連結.

:hover

應用于有滑鼠指針懸停于其上的元素。

:active

應用于被激活的元素，如被點選的連結、被按下的按鈕等。

:visited

應用于已經被通路過的連結.

特别注意：著名的”love-HA“規則。

:focus

應用于擁有鍵盤輸入焦點的元素。

:first-child

來選擇元素的第一個子元素

:lang

應用于元素帶有指定lang的情況。

• 僞元素有

::first-letter

應用于元素文本的第一個字（母）。

::first-line

應用于元素文本的第一行。

::before

在元素内容的最前面添加新内容。

::after

在元素内容的最後面添加新内容。