【1】是什么
w3c 對(duì)兩者的定義：
? CSS 偽類用于向某些選擇器添加特殊的效果。
? CSS 偽元素用于將特殊的效果添加到某些選擇器瞄桨。
其實(shí)根本意思就是就是對(duì)那些不能通過(guò)class蠢莺、id等選擇元素的補(bǔ)充
是不是不夠直觀偎窘？好坷牛，我們來(lái)個(gè)定義罕偎，偽就是“假”的意思，偽類就是創(chuàng)建了一個(gè)假的類名京闰；偽元素就是創(chuàng)建了一個(gè)假的元素標(biāo)簽锨亏。不存在在DOM文檔中，是虛擬的元素忙干，是創(chuàng)建新元素。代表某個(gè)元素的子元素浪藻，這個(gè)子元素雖然在邏輯上存在捐迫，但卻并不實(shí)際存在于文檔樹(shù)中。
偽類舉例：你想給ul里面的第一個(gè)li改變背景
一般方法就是給第一個(gè)li加一個(gè)類名然后css樣式 .first{background:red}就搞定了
<ul>
<li class=”first”>1</li>
<li>2</li>
</ul>
同樣使用偽類的方法li:first-child{background:red}可以達(dá)到同樣的效果爱葵，所以說(shuō)偽類就是相當(dāng)于創(chuàng)建了一個(gè)假的類名施戴，也可以達(dá)到效果，是不是很爽懊日伞赞哗！
常用的偽類平面圖：
常用的偽類分類圖：
偽元素舉例：你想給ul里面的第一個(gè)li改變背景
li::first-letter{background:red}
我們要是不用偽元素怎么實(shí)現(xiàn)呢
<ul>
<li><span>1</span></li>
<li>2</li>
</ul>
li span{background:red}
偽元素真實(shí)項(xiàng)目還用舉例：
常用的偽元素平面圖：
常用的偽元素類分類圖：
【2】區(qū)別
偽類的效果可以通過(guò)添加實(shí)際的類名來(lái)實(shí)現(xiàn)
偽元素的效果可以通過(guò)添加實(shí)際的元素來(lái)實(shí)現(xiàn)
所以它們根本區(qū)別在于：它們是否創(chuàng)造了新的元素
注意：
偽類只能使用“：”
而偽元素既可以使用“:”，也可以使用“::”
因?yàn)閭晤愂穷愃朴谔砑宇愃钥梢允嵌鄠€(gè)辆雾，而偽元素在一個(gè)選擇器中只能出現(xiàn)一次肪笋，并且只能出現(xiàn)在末尾
相關(guān)問(wèn)題
:after/::after和:before/::before的異同
相同點(diǎn)
都可以用來(lái)表示偽類對(duì)象，用來(lái)設(shè)置對(duì)象前的內(nèi)容
:before和::before寫(xiě)法是等效的; :after和::after寫(xiě)法是等效的
不同點(diǎn)
:before/:after是Css2的寫(xiě)法度迂，::before/::after是Css3的寫(xiě)法
:before/:after 的兼容性要比::before/::after好 藤乙，
不過(guò)在H5開(kāi)發(fā)中建議使用::before/::after比較好
注意：
偽對(duì)象要配合content屬性一起使用
偽對(duì)象不會(huì)出現(xiàn)在DOM中，所以不能通過(guò)js來(lái)操作惭墓，僅僅是在 CSS 渲染層加入
