作者：Marhoo??

偽類：

用于選擇DOM樹之外的信息，或是不能用簡單選擇器進行表示的信息。（相當(dāng)于一個特殊的class選擇器，用來添加一些特殊效果）

簡而言之作用于元素當(dāng)前的狀態(tài)修飾（點擊，懸浮，鏈接）

偽元素：

為DOM樹沒有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。（相當(dāng)于一個特殊的元素（div、span），可以用來存放一些特殊樣式或者內(nèi)容）

簡而言之作用于元素當(dāng)前內(nèi)容修飾（之前，之后，首字，首行）

偽類種類:

偽元素種類:

區(qū)別比較

這里通過兩個例子來說明兩者的區(qū)別。

下面是一個簡單的html列表片段：

<ul>
    <li>我是第一個</li>
    <li>我是第二個</li></ul>

如果想要給第一項添加樣式，可以在為第一個<li>添加一個類，并在該類中定義對應(yīng)樣式：

<ul>
    <li class="first-item">我是第一個</li>
    <li>我是第二個</li></ul>

li.first-item {
    color: orange}

如果不用添加類的方法，我們可以通過給設(shè)置第一個<li>的:first-child偽類來為其添加樣式。這個時候，被修飾的<li>元素依然處于文檔樹中。

li:first-child {
    color: orange}

下面是另一個簡單的html段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設(shè)置該span元素的樣式：

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

.first {
    font-size: 5em;}

如果不創(chuàng)建一個<span>元素，我們可以通過設(shè)置<p>的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創(chuàng)建了一個虛擬的<span>元素并添加了樣式，但實際上文檔樹中并不存在這個<span>元素。

<p>Hello World, and wish you have a good day!</p>

p:first-letter {
    font-size: 5em;}

從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。

偽元素是使用單冒號還是雙冒號

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

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