css屬性：css偽類和css虛擬元素的區別（附代碼）

css虛擬元素和偽類對於剛學習css的同學來說可能會容易混淆，官方文檔中解釋：CSS 偽類用於向某些選取器添加特殊的效果，CSS 虛擬元素是用於將特殊的效果添加到某些選取器。那麼，css虛擬元素和偽類的區別究竟在哪？本文將給大家細細的說道說道。

首先可以明確兩點，第一：兩者都與選取器相關，第二：就是添加一些“特殊”的效果。這裡特殊指的是兩者描述了其他 css 無法描述的東西。

偽類種類

偽類	作用
:active	將樣式添加到被啟用的元素
:focus	將樣式添加到被選中的元素
:hover	當滑鼠懸浮在元素上方時，向元素添加樣式
:link	將特殊樣式添加到未被訪問過的連結
:visited	將特殊樣式添加到被訪問過的連結
:first-child	將特殊樣式添加到元素的第一個子項目
:lang	允許創造者來定義指定的元素中使用的語言

虛擬元素種類

虛擬元素	作用
：first-letter	將特殊樣式添加到文本的首字母
：first=line	將特殊樣式添加到文本的首行
：before	在某元素之前插入某些內容
：after	在某元素之後插入某些內容

區別

這裡用偽類 :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虛擬元素用法詳解