CSS偽類和偽元素的區(qū)別
作者：Marhoo??
偽類：
用于選擇DOM樹之外的信息，或是不能用簡單選擇器進(jìn)行表示的信息。（相當(dāng)于一個(gè)特殊的class選擇器，用來添加一些特殊效果）
簡而言之作用于元素當(dāng)前的狀態(tài)修飾（點(diǎn)擊，懸浮，鏈接）
偽元素：
為DOM樹沒有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。（相當(dāng)于一個(gè)特殊的元素（div、span），可以用來存放一些特殊樣式或者內(nèi)容）
簡而言之作用于元素當(dāng)前內(nèi)容修飾（之前，之后，首字，首行）
偽類種類:
偽元素種類:
區(qū)別比較
這里通過兩個(gè)例子來說明兩者的區(qū)別。
下面是一個(gè)簡單的html列表片段：
<ul>
<li>我是第一個(gè)</li>
<li>我是第二個(gè)</li></ul>如果想要給第一項(xiàng)添加樣式，可以在為第一個(gè)<li>添加一個(gè)類，并在該類中定義對應(yīng)樣式：
<ul>
<li class="first-item">我是第一個(gè)</li>
<li>我是第二個(gè)</li></ul>
li.first-item {
color: orange}如果不用添加類的方法，我們可以通過給設(shè)置第一個(gè)<li>的:first-child偽類來為其添加樣式。這個(gè)時(shí)候，被修飾的<li>元素依然處于文檔樹中。
li:first-child {
color: orange}下面是另一個(gè)簡單的html段落片段：
<p>Hello World, and wish you have a good day!</p>如果想要給該段落的第一個(gè)字母添加樣式，可以在第一個(gè)字母中包裹一個(gè)元素，并設(shè)置該span元素的樣式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
font-size: 5em;}如果不創(chuàng)建一個(gè)<span>元素，我們可以通過設(shè)置<p>的:first-letter偽元素來為其添加樣式。這個(gè)時(shí)候，看起來好像是創(chuàng)建了一個(gè)虛擬的<span>元素并添加了樣式，但實(shí)際上文檔樹中并不存在這個(gè)<span>元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;}從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素。
偽元素是使用單冒號還是雙冒號
CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素，以此來區(qū)分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。
然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確運(yùn)行。
