前言
熟悉前端的人都會聽過css的僞類與僞元素，然而大多數的人都會将這兩者混淆。本文從解析僞類與僞元素的含義出發，區分這兩者的差別，即使你有用過僞類與僞元素，但裡面總有一兩個你沒見過的吧。
僞類與僞元素
先說一說為什麼css要引入僞元素和僞類，以下是css2.1 Selectors章節中對僞類與僞元素的描述：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
直譯過來就是：css引入僞類和僞元素概念是為了格式化文檔樹以外的資訊。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是清單中的第一個元素。下面分别對僞類和僞元素進行解釋。
僞類用于當已有元素處于的某個狀态時，為其添加對應的樣式，這個狀态是根據使用者行為而動态變化的。比如說，當使用者懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀态。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它隻有處于dom樹無法描述的狀态下才能為元素添加樣式，是以将其稱為僞類。
僞元素用于建立一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然使用者可以看到這些文本，但是這些文本實際上不在文檔樹中。
僞類與僞元素的差別
這裡通過兩個例子來說明兩者的差別。
下面是一個簡單的html清單片段：
<ul>
<li>我是第一個</li>
<li>我是第二個</li>
</ul> 複制
如果想要給第一項添加樣式，可以在為第一個
<li>
添加一個類，并在該類中定義對應樣式：
<ul>
<li class="first-item">我是第一個</li>
<li>我是第二個</li>
</ul> 複制
li.first-item {
color: orange
} 複制
如果不用添加類的方法，我們可以通過給設定第一個
<li>
的
:first-child
僞類來為其添加樣式。這個時候，被修飾的
<li>
元素依然處于文檔樹中。
li:first-child {
color: orange
} 複制
下面是另一個簡單的html段落片段：
<p>Hello World, and wish you have a good day!</p> 複制
如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設定該span元素的樣式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p> 複制
.first {
font-size: 5em;
} 複制
如果不建立一個
<span>
元素，我們可以通過設定
<p>
的
:first-letter
僞元素來為其添加樣式。這個時候，看起來好像是建立了一個虛拟的
<span>
元素并添加了樣式，但實際上文檔樹中并不存在這個
<span>
元素。
<p>Hello World, and wish you have a good day!</p> 複制
p:first-letter {
font-size: 5em;
} 複制
從上述例子中可以看出，僞類的操作對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素。是以，僞類與僞元素的差別在于：有沒有建立一個文檔樹之外的元素。
僞元素是使用單冒号還是雙冒号
CSS3規範中的要求使用雙冒号(::)表示僞元素，以此來區分僞元素和僞類，比如::before和::after等僞元素使用雙冒号(::)，:hover和:active等僞類使用單冒号(:)。除了一些低于IE8版本的浏覽器外，大部分浏覽器都支援僞元素的雙冒号(::)表示方法。
然而，除了少部分僞元素，如::backdrop必須使用雙冒号，大部分僞元素都支援單冒号和雙冒号的寫法，比如::after，寫成:after也可以正确運作。
對于僞元素是使用單冒号還是雙冒号的問題，w3c标準中的描述如下：
Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.
大概的意思就是：雖然CSS3标準要求僞元素使用雙冒号的寫法，但也依然支援單冒号的寫法。為了向後相容，我們建議你在目前還是使用單冒号的寫法。
實際上，僞元素使用單冒号還是雙冒号很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。
僞類與僞元素的具體用法
這一章以含義解析和例子的方式列出大部分的僞類和僞元素的具體用法。下面是根據用途分類的僞類總結圖和根據冒号分類的僞元素總結圖：
某些僞類或僞元素仍然處于試驗階段，在使用前建議先在Can I Use等網站查一查其浏覽器相容性。處于試驗階段的僞類或僞元素會在标題中标注。