CSS中偽類與偽元素的概念是很容易混淆的
今天就來談?wù)剛晤惻c偽元素之間的區(qū)別
定義
首先先來看看偽類與偽元素的定義
w3c中對于它們是這么解釋的
- 偽類：用于向某些選擇器添加特殊的效果
- 偽元素：用于將特殊的效果添加到某些選擇器
CSS 引入偽類和偽元素的概念是為了實現(xiàn)基于文檔樹之外的信息的格式化
CSS3中的標準是偽類使用單冒號“:”
而偽元素使用雙冒號“::”（避免混淆）
但是在此之前無論是偽類還是偽元素都使用單冒號“:”
所以為了保證兼容偽元素兩種使用方法都是可以的
但是低版本IE有雙冒號兼容問題
所以以前編寫樣式的人們對于偽類和偽元素就干脆統(tǒng)統(tǒng)使用單冒號
導(dǎo)致這種混淆一直延續(xù)下來
注意
在使用偽類和偽元素的時候
有一點要特別注意
偽類就像真正的類一樣，可以疊加使用
沒有數(shù)量上限，只要不是互斥的
比如這樣
em:first-child:hover {
color: red;
}
這是完全可以的
但注意，這里是“與”的關(guān)系
也就是說既要滿足“first-child”第一個子元素
又要滿足“hover”光標懸浮
偽元素就要嚴格的多
偽元素在一個選擇器中只能出現(xiàn)一次淡诗，并且只能出現(xiàn)在末尾
（這里有同學(xué)誤會了测僵，所以我作出了修改）
像下面的樣式是無法生效的
p::first-letter:hover { /*錯誤的寫法：偽元素不是末尾*/
color: red;
}
p::first-letter::selection { /*錯誤的寫法：偽元素出現(xiàn)了多個*/
color: red;
}
再多說一句關(guān)于它們的優(yōu)先級
在計算權(quán)重的時候
偽類與類優(yōu)先級相同
偽元素與標簽優(yōu)先級相同
總結(jié)
- 偽類與偽元素都是用于向選擇器加特殊效果
- 偽類與偽元素的本質(zhì)區(qū)別就是是否抽象創(chuàng)造了新元素
- 偽類只要不是互斥可以疊加使用
- 偽元素在一個選擇器中只能出現(xiàn)一次肤频，并且只能出現(xiàn)在末尾
- 偽類與偽元素優(yōu)先級分別與類鹤啡、標簽優(yōu)先級相同
https://blog.csdn.net/q1056843325/article/details/53560588
