在CSS1和CSS2中對僞類和僞選擇器沒有作出很明顯的區別定義，而兩者在語法是同樣的，都是以:開頭，這形成不少人會將某些僞元素誤認爲是僞類，如:before，:after；而在CSS3給出的定義中，兩者區別更爲明顯，也更容易理解。css
1、定義
- 僞類
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.html
解讀：僞類用於選擇DOM樹以外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，好比:visited，:active；後者包含那些知足必定邏輯條件的DOM樹中的元素，好比:first-child，:first-of-type，：target。express
- 僞元素
Pseudo-elements create abstractions about the document tree beyond those specified by the document language.瀏覽器
解讀：僞元素爲DOM樹沒有定義的虛擬元素。不一樣於其餘選擇器，它不以元素爲最小選擇單元，它選擇的是元素指定內容。好比::before表示選擇元素內容的以前內容，也就是""；::selection表示選擇元素被選中的內容。markdown
2、語法
在CSS3中，僞類與僞元素在語法上也有所區別，僞元素修改成以::開頭。但由於歷史緣由，瀏覽器對以:開頭的僞元素也繼續支持，但建議規範書寫爲::開頭。ide
3、僞類/僞元素一覽表
-
僞類post
Selector Meaning CSS :active 選擇正在被激活的元素 1 :hover 選擇被鼠標懸浮着元素 1 :link 選擇未被訪問的元素 1 :visited 選擇已被訪問的元素 1 :first-child 選擇知足是其父元素的第一個子元素的元素 2 :lang 選擇帶有指定 lang 屬性的元素 2 :focus 選擇擁有鍵盤輸入焦點的元素 2 :enable 選擇每一個已啓動的元素 3 :disable 選擇每一個已禁止的元素 3 :checked 選擇每一個被選中的元素 3 :target 選擇當前的錨點元素 3 :first-of-type 選擇知足是其父元素的第一個某類型子元素的元素 3 :last-of-type 選擇知足是其父元素的最後一個某類型子元素的元素 3 :only-of-type 選擇知足是其父元素的惟一一個某類型子元素的元素 3 :nth-of-type(n) 選擇知足是其父元素的第n個某類型子元素的元素 3 :nth-last-of-type(n) 選擇知足是其父元素的倒數第n個某類型的元素 3 :only-child 選擇知足是其父元素的惟一一個子元素的元素 3 :last-child 選擇知足是其父元素的最後一個元素的元素 3 :nth-child(n) 選擇知足是其父元素的第n個子元素的元素 3 :nth-last-child(n) 選擇知足是其父元素的倒數第n個子元素的元素 3 :empty 選擇知足沒有子元素的元素 3 :in-range 選擇知足值在指定範圍內的元素 3 :out-of-range 選擇值不在指定範圍內的元素 3 :invalid 選擇知足值爲無效值的元素 3 :valid 選擇知足值爲有效值的元素 3 :not(selector) 選擇不知足selector的元素 3 :optional 選擇爲可選項的表單元素，即沒有「required」屬性 3 :read-only 選擇有"readonly"的表單元素 3 :read-write 選擇沒有"readonly"的表單元素 3 :root 選擇根元素 3
注意：p:first-child表示選擇的元素既要是p標籤，同時要是其父元素的第一個子元素，不要錯誤認爲是表示p元素的第一個子元素；同理，p:first-of-type表示選擇的元素要是p標籤，同時要是其父元素的第一個p標籤元素；其餘相似的僞類含義類似。ui
-
僞元素code
Selector Meaning CSS ::first-letter 選擇指定元素的第一個單詞 1 ::first-line 選擇指定元素的第一行 1 ::after 在指定元素的內容前面插入內容 2 ::before 在指定元素的內容後面插入內容 2 ::selection 選擇指定元素中被用戶選中的內容 3
參考連接orm
[1] w3schools.com；
[2] CSS3僞類和僞元素的特性和區別;
原文：https://www.cnblogs.com/ammyben/p/8012747.html