CSS中偽類與偽元素的概念是很容易混淆的
今天就來談?wù)剛晤惻c偽元素之間的區(qū)別
定義
首先先來看看偽類與偽元素的定義
w3c中對于它們是這么解釋的
- 偽類：用于向某些選擇器添加特殊的效果
- 偽元素：用于將特殊的效果添加到某些選擇器
講道理逗爹，可能我語文不好幅虑，我覺得這兩句話是等價的 :-)
根本不能看出有什么區(qū)別
都是對某些選擇器“加特技”
標(biāo)準(zhǔn)有這么一句話翻譯過來是這樣的
CSS 引入偽類和偽元素的概念是為了實(shí)現(xiàn)基于文檔樹之外的信息的格式化
這話更抽象矛绘，其實(shí)意思就是對那些我們不能通過class比规、id等選擇元素的補(bǔ)充
區(qū)別
這個區(qū)別我們需要一個例子來理解
<p>
<em>This</em>
<em>is a text</em>
</p>
如果我們想要第一個em標(biāo)簽字體顏色變紅怎么做呢
使用我們熟悉的偽類很簡單
em:first-child {
color: red;
}
但是如果不存在偽類我們怎么做呢
這是我們就需要為第一個em標(biāo)簽添加類
<p>
<em class="first-child">This</em>
<em>is a text</em>
</p>
em.first-child {
color: red;
}
可以實(shí)現(xiàn)同樣的效果
<p>
<em>This</em>
<em>is a text</em>
</p>
還是這個例子
現(xiàn)在我想讓這個段落的第一個字母變紅
怎么做呢
這回我們需要使用偽元素
p::first-letter {
color: red;
}
同樣假設(shè)偽元素不存在的情況
這時我們只能嵌套span標(biāo)簽來實(shí)現(xiàn)
<p>
<em><span>T</span>his</em>
<em>is a text</em>
</p>
p span {
color: red;
}
看到這里浸赫，相信大家已經(jīng)清楚了為什么一個叫做偽類办斑，一個叫做偽元素
偽類的效果可以通過添加實(shí)際的類來實(shí)現(xiàn)
偽元素的效果可以通過添加實(shí)際的元素來實(shí)現(xiàn)
在CSS權(quán)重中偽元素相當(dāng)于元素扩灯、偽類相當(dāng)于類
它們的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素
歷史
偽類最開始的時候只是用來表示元素的動態(tài)（典型的錨偽類link牵署、visited疚颊、hover狈孔、active）
在CSS2標(biāo)準(zhǔn)中對它進(jìn)行了擴(kuò)展讓它雖然邏輯存在但不需要在DOM樹中標(biāo)識
偽元素代表了某個元素的子元素，雖然邏輯存在材义，但不存在于DOM樹
雖然它們的概念很容易被我們混淆
但是也不影響我們正常使用
偽類只能使用“：”均抽，而偽元素既可以使用“:”，也可以使用“::”
這里我就解釋一下為什么
CSS3中的標(biāo)準(zhǔn)是偽類使用單冒號“:”
而偽元素使用雙冒號“::”（避免混淆）
但是在此之前無論是偽類還是偽元素都使用單冒號“:”
所以為了保證兼容偽元素兩種使用方法都是可以的
但是低版本IE有雙冒號兼容問題
所以以前編寫樣式的人們對于偽類和偽元素就干脆統(tǒng)統(tǒng)使用單冒號
導(dǎo)致這種混淆一直延續(xù)下來
注意
在使用偽類和偽元素的時候
有一點(diǎn)要特別注意
偽類就像真正的類一樣其掂，可以疊加使用
沒有數(shù)量上限油挥，只要不是互斥的
比如這樣
em:first-child:hover {
color: red;
}
這是完全可以的
但注意，這里是“與”的關(guān)系
也就是說既要滿足“first-child”第一個子元素
又要滿足“hover”光標(biāo)懸浮
偽元素就要嚴(yán)格的多
偽元素在一個選擇器中只能出現(xiàn)一次款熬，并且只能出現(xiàn)在末尾
（這里有人誤會了深寥，所以我作出了修改）
像下面的樣式是無法生效的
p::first-letter:hover { /*錯誤的寫法：偽元素不是末尾*/
color: red;
}
p::first-letter::selection { /*錯誤的寫法：偽元素出現(xiàn)了多個*/
color: red;
}
再多說一句關(guān)于它們的優(yōu)先級
在計(jì)算權(quán)重的時候
偽類與類優(yōu)先級相同
偽元素與標(biāo)簽優(yōu)先級相同
總結(jié)
- 偽類與偽元素都是用于向選擇器加特殊效果
- 偽類與偽元素的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素
- 偽類只要不是互斥可以疊加使用
- 偽元素在一個選擇器中只能出現(xiàn)一次，并且只能出現(xiàn)在末尾
- 偽類與偽元素優(yōu)先級分別與類贤牛、標(biāo)簽優(yōu)先級相同
