【前言】
本文簡單說明下偽類和偽元素的區別。在css1，css2中，大家或多或少的用過 :hover，:visited, :before, :after。css1和css2中對偽類的偽元素的區別比較模糊，甚至經常有同行將:before、:after稱為偽類。css3對這兩個概念做了相對較清晰地概念，並且在語法上也很明顯的講二者區別開。（1）概括：偽類與偽元素的本質區別就是是否抽象創造了新元素；可以同時使用多個偽類，而只能同時使用乙個偽元素；
（2）定義：
首先先來看看偽類與偽元素的定義 ，w3c中對於它們是這麼解釋的
偽類：用於向某些選擇器新增特殊的效果
偽元素：用於將特殊的效果新增到某些選擇器
（3）詳細解析：
偽類：首先來說下偽類，css 偽類用於向某些選擇器新增特殊的效果。它並不改變任何dom內容。只是插入了一些修飾類的元素，這些元素對於使用者來說是可見的，但是對於dom來說不可見。偽類的效果可以通過新增乙個實際的類來達到 。例如我們常見的幾個超連結偽類
a:link /* 未訪問的鏈結 /
a:visited / 已訪問的鏈結 /
a:hover / 滑鼠移動到鏈結上 /
a:active / 選定的鏈結 */
小結：由於狀態是動態變化的，所以乙個元素達到乙個特定狀態時，它可能得到乙個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類。
偽元素：
接下來說下偽元素，簡單來說，偽元素建立了乙個虛擬容器，這個容器不包含任何dom元素，但是可以包含內容。另外，開發者還可以為偽元素定製樣式。
::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常用」content」配合使用，見過最多的就是清除浮動。
.clearfix::after
.clearfix:after
.clearfix //zoom(ie轉有屬性)可解決ie6,ie7浮動問題
（4）通俗解析
這個區別我們需要乙個例子來理解
this
is a text
如果我們想要第乙個em標籤字型顏色變紅怎麼做呢 ？？？使用我們熟悉的偽類很簡單em:first-child
但是如果不存在偽類我們怎麼做呢？？？這是我們就需要為第乙個em標籤新增類this
is a text
css** 收藏** em.first-child 可以實現同樣的效果
css** 收藏**
this
is a text
還是這個例子 。現在我想讓這個段落的第乙個字母變紅 ，怎麼做呢 ？？？ 這回我們需要使用偽元素
css** 收藏**
p::first-letter
同樣假設偽元素不存在的情況 ，這時我們只能巢狀span標籤來實現this
is a text
css** 收藏** p span 看到這裡，相信大家已經清楚了為什麼乙個叫做偽類，乙個叫做偽元素 。偽類的效果可以通過新增實際的類來實現 ，偽元素的效果可以通過新增實際的元素來實現 。它們的本質區別就是是否抽象創造了新元素
偽類和偽元素區別
偽類是向某些選擇器新增特殊的效果，可以通過新增乙個類來達到，用乙個冒號來表示。pseudo classes 如 first child,link visiter hover active focus lang 偽類類似於class，表示一些元素的狀態，但無需標識的分類。偽元素是將特殊的效果新增到某些...
偽類和偽元素的區別
個人的關注點可能主要集中在js方向上，但是本著css也不能丟掉的原則，所以上網查了些css方面的困惑點，這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看，如果需要新增新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上新增類別的...
偽類和偽元素的區別
學習這麼長時間對於一些基本點還是不太理解，所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到，而偽元素的效果則需要通過新增乙個實際的元素才能達到，這也是為什麼他們乙個稱為偽類，乙個稱為偽元素...