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虛擬元素用法詳解