兩者的定義：

偽類一開始單單只是用來表示一些元素的動態狀態，典型的就是連結的各個狀態(LVHA)。隨後CSS2標準擴充套件了其概念範圍，使其成為了所有邏輯上存在但在文件樹中卻無須標識的“幽靈”分類。

偽元素則代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文件樹中。

我自己的理解：

偽類，類，class是一個類，就類似class這樣，表示一些元素的狀態的，但是無須標識的分類。

偽元素，就是一個元素，類似p標籤元素，等等，邏輯上存在，但是實際並不存在在文件樹中。

另外一個簡單的理解和區分就是：

偽類前面是一個冒號，為元素前面是兩個冒號。E:first-child 偽類，E::first-line為元素。

特殊情況::before 和 ::after 偽元素

before 和after是在元素前面和後面新增一些元素，因此是偽元素，CSS3選擇器中已經將其前面變為兩個冒號了。請看：w3cselect

問題來了，那麼為什麼我們平時用before和after前面就一個冒號？

當你看了css2選擇器就知道了，老的規範中，偽類和偽元素都用一個冒號，新規範為了區分，偽元素統一用兩個“：：”,所以，大家注意了，往後在寫css3的時候，為元素要用兩個冒號，偽類用一個冒號。

偽類和偽元素的應用

我之前的css常用效果，講了一些。

像偽元素

::-webkit-scrollbar::selection::-webkit-input-placeholder ::after

等等。

偽元素中用的最多的要數::after和::before了

可以用這兩個偽元素做很多效果！

html

css

a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px;}a:hover::before, a:hover::after { position: absolute; }a:hover::before { content: "\5B"; left: -20px; }a:hover::after { content: "\5D"; right: -20px; }

其中content中可以用attr也可以用url

例如：

a：:after { content:"(" attr(href) ")"; } h1::before { content: url(logo.png); }

偽類中用的最多的要數：nth-child()選擇器了，關於nth-child()，我之前有篇文章介紹過。

總結：

偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。