偽類：
偽類用於當已有元素處於的某個狀態時,為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。
比如，當用戶懸停在指定的元素時，我們可以通過:hover 來描述這個元素的狀態。
雖然它和普通的 css 類相似，可以為已有的元素添加樣式，但是它只有處於 dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類
常見偽類::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid
:active ：將樣式添加到被激活的元素
:focus ：將樣式添加到被選中的元素
:hover：當鼠標懸浮在元素上方時，向元素添加樣式
:link ：將特殊的樣式添加到未被訪問過的鏈接
:visitied ：將特殊的樣式添加到被訪問過的鏈接
:first-child ：將特殊的樣式添加到元素的第一個子元素
:lang ：允許創作者來定義指定的元素中使用的語言
偽元素：
偽元素用於創建一些不在文檔樹中的元素,並為其添加樣式。比如說，我們可以通過:before 來在一個元素前增加一些文本，並為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中
偽元素前面是兩個冒號，E::first-line 偽元素。會創造出不存在的新元素，由於 css 對單冒號的偽元素也支持，單雙冒號都支持,但實際上現在css3 已經明確規定了偽類單冒號，偽元素雙冒號的規則,用於區分它們
::before/:before在被選元素前插入內容 ::after/:after 在被元素后插入內容，其用法和特性與:before相似 ::placeholder 匹配占位符的文本，只有元素設置了placeholder 屬性時，該偽元素才能生效
對於偽元素 :before和 :after 而言，屬性 content 是必須設置的，它的值可以為字符串，也可以有其它形式，比如指向一張圖片的 URL
:first-letter ：將特殊的樣式添加到文本的首字母
:first-line ：將特殊的樣式添加到文本的首行
:before ：在某元素之前插入某些內容
:after ：在某些元素之后插入某些內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo</title> <style> /* .first-item{ color: orange; } */ li:first-child{ color: skyblue; } p:first-letter{ color: antiquewhite; } </style> </head> <body> <ul> <li class="first-item">我是第一個</li> <li>我是第二個</li> </ul> <p>hello world,and wish you have a good day!</p> </body> </html>
從上述的例子可以看出， 偽類的操作對象時文檔樹中已有的元素，而偽元素則創建了一個文檔樹外的元素。
因此，偽類與偽元素的區別在於：有沒有創建一個文檔樹之外的元素
偽元素是使用單冒號還是雙冒號：
css3規范中的要求使用雙冒號（::）表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號（::），:hover和:active等偽類使用單冒號(:）。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號（::）表示方法。
然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after ，寫成 :after也可以正確運行。
偽類: 用來選擇那些不能夠被普通選擇器選擇的文檔之外的元素,比如:hover
偽類用於當已有元素處於的某個狀態時,為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。
比如，當用戶懸停在指定的元素時，我們可以通過:hover 來描述這個元素的狀態。
雖然它和普通的 css 類相似，可以為已有的元素添加樣式，但是它只有處於 dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類
常見偽類::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid
偽元素:
偽元素用於創建一些不在文檔樹中的元素,並為其添加樣式。比如說，我們可以通過:before 來在一個元素前增加一些文本，並為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中
偽元素前面是兩個冒號，E::first-line 偽元素。會創造出不存在的新元素，由於 css 對單冒號的偽元素也支持，單雙冒號都支持,但實際上現在css3 已經明確規定了偽類單冒號，偽元素雙冒號的規則,用於區分它們
::before/:before在被選元素前插入內容::after/:after 在被元素后插入內容，其用法和特性與:before相似::placeholder 匹配占位符的文本，只有元素設置了placeholder 屬性時，該偽元素才能生效
對於偽元素 :before和 :after 而言，屬性 content 是必須設置的，它的值可以為字符串，也可以有其它形式，比如指向一張圖片的 URL
總結
- 偽類和偽元素都是用來表示文檔樹以外的"元素"
- 偽類和偽元素分別用單冒號:和雙冒號::來表示
- 偽類和偽元素的區別，最關鍵的點在於如果沒有偽元素(或偽類)，是否需要添加元素才能達到目的，如果是則是偽元素，反之則是偽類
總結偽類：
1、偽類是類，所以跟css選擇器有關，不存在於dom中，
2、css偽類是用來添加一些選擇器的特殊效果的，
3、偽類前面之后只有一個冒號
總結偽元素：
1、偽元素是創造文檔樹之外的對象。偽元素也是元素，只不過不存在於dom對象中，但是瀏覽器審查元素的時候能看得到的，比如::before 和 ::after
不同點：
1、偽類本質上是為了彌補常規css選擇器的不足，以便獲取到更多信息，
2、偽元素本質上是創建了一個由內容的虛擬容器，
3、css3中偽類和偽元素的語法不同，
4、可以同時使用多個偽類，而只能同時使用一個偽元素，
一句話總結：
偽元素產生新對象，在DOM樹中看不到（審查元素的時候可以看到），但是可以操作。
偽類不產生新的對象，僅是DOM中一個元素的不同狀態。