CSS引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，鼠標懸停在上面的元素（偽類），一句話中的第一個字母或者是列表中的第一個元素（偽元素）。

一、偽類

:link

偽類將應用于未被訪問過的鏈接，與:visited互斥。

:visited

偽類將應用于已經被訪問過的鏈接，與:link互斥。

:hover

偽類將應用于有鼠標指針懸停于其上的元素。

:active

偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。

需要注意的是在CSS的定義中，同一個元素的:hover必須位于:link、:visited之后才能生效，:active必須位于:hover之后才能生效。

:focus

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

:first-child

偽類將應用于元素在頁面中第一次出現的時候。

:lang

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

二、偽元素

與偽類針對特殊狀態的元素不同的是，偽元素是對元素中的特定內容進行操作，它所操作的層次比偽類更深了一層，也因此它的動態性比偽類要低得多。設計偽元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或后面這種普通的選擇器無法完成的工作。常見偽元素：

:first-letter

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

:first-line

偽元素的樣式將應用于元素文本的第一行。

:before

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

:after

在元素內容的最后面添加新內容。 

偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素。

三、偽元素是使用單冒號還是雙冒號？

　　CSS3規范中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。

　　然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確運行。

雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。

　　實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。