css偽元素和偽類對於剛學習css的同學來說可能會容易混淆，官方文件中解釋：CSS 偽類用於向某些選擇器添加特殊的效果，CSS 偽元素是用於將特殊的效果會加到某些選擇器。那麼，css偽元素和偽類的差別究竟在哪？本文將給大家細細的說說。
首先可以明確兩點，第一：兩者都與選擇器相關，第二：就是添加一些「特殊」的效果。這裡特殊指的是兩者描述了其他 css 無法描述的東西。
偽類別類型
| 偽類別 |
作用 |
|
|
|
將樣式加入到已啟動的元素 |
|
|
將樣式加入到被選取的元素 |
|
|
當滑鼠懸浮在元素上方時，向元素添加樣式 |
|
|
將特殊樣式加入到未被造訪過的連結 |
|
#允許創造者來定義指定的元素中使用的語言
|
#作用 |
|
|
#將特殊樣式加入文字的首字母 |
|
|
在某元素之前插入某些內容 |
區別
這裡用偽類別 :first-child 和偽元素 :first-letter 來比較。
p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
//偽類:first-child 新增樣式到第一個子元素
如果我們不使用偽類，而希望達到上述效果，可以這樣做：
.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
即我們為第一個子元素新增一個類，然後定義這個類別的樣式。那我們接著看看為元素：
p:first-letter {color: red}
<p>I am stephen lee.</p>
//偽元素:first-letter 新增樣式到第一個字母
那麼如果我們不使用偽元素，要達到上述效果，該怎麼做呢？
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
即我們為第一個字母加上一個 span，然後為 span 增加樣式。
兩者的差別已經出來了。那就是：
偽類的效果可以透過添加一個實際的類別來達到，而偽元素的效果則需要透過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。
最後
偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
:Pseudo-classes ::Pseudo-elements
但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。
相關文章推薦：
css-偽類別與偽元素_html/css_WEB-ITnose
CSS 屬性: before && :after的用法，偽類別和偽元素的區別_html/css_WEB-ITnose
以上是css屬性：css偽類別和css偽元素的區別（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！