css裏的僞類和僞元素的區分

首先來看爲w3c給他們的定義：

    僞類：用於向某些選擇器添加特殊的效果；

    僞元素：用於將特殊的效果添加到某些選擇器。

    。。。。。等於沒說！

爲了區分僞類和僞元素：

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

下面用實例來區別二者的不一樣（用僞類 :first-child 和僞元素 :first-letter 來進行比較。）：

僞類 --eg：

//css
p>i:first-child {color: red}

//html
<p><i>first</i><i>second</i></p>

 解釋：僞類 :first-child 添加樣式到第一個子元素

若是咱們不使用僞類，而但願達到上述效果，能夠這樣作：

//css
.first-child {color: red}
//html
<p><i class=first-child>first</i><i>second</i></p>

//即咱們給第一個子元素添加一個類，而後定義這個類的樣式

 僞元素--eg:

//css
p:first-letter {color: red}
//html
<p>i am stephen lee.</p>

 //僞元素 :first-letter 添加樣式到第一個字母

那麼若是咱們不使用僞元素，要達到上述效果

//css
.first-letter {color: red}

html
<p><span class='first-letter'>i</span> am stephen lee.</p>

 即咱們給第一個字母添加一個 span，而後給 span 增長樣式。

綜上：二者的區別已經出來了：

   僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。

參照：http://www.ynpxrz.com/n856180c2022.aspx