偽類：
用于選擇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)行宫仗。
