伪类 伪元素 如何区分
前段時(shí)間在寫網(wǎng)頁(yè)的時(shí)候,使用了CSS的偽元素:after來(lái)實(shí)現(xiàn)樣式,故而重溫了一下偽類和偽元素。平時(shí)實(shí)現(xiàn)的時(shí)候便是拿出來(lái)用,但是真正區(qū)分兩者的概念的時(shí)候卻有點(diǎn)混淆了。
首先,查看一下W3S對(duì)偽類和偽元素的定義:
偽類:用于向某些選擇器添加特殊效果。
偽元素:向某些選擇器設(shè)置特殊效果。
對(duì)于我這種理解能力比較差的人來(lái)說(shuō),恕我直言,這兩句話貌似……這是一個(gè)概念吧?
從這兩個(gè)概念,我們可以知道:1.二者都與選擇器有著密不可分的聯(lián)系;2.“特殊”的效果……
特殊在何處?他們與類、元素之間有什么關(guān)系呢?
偽類的種類:
通過(guò)偽類的種類分類,我們可以見(jiàn)得,偽類是基于元素的某種狀態(tài)下(如:hover等)或者元素存在某種特性的時(shí)候(如:lang等)發(fā)揮其作用的。偽類根據(jù)動(dòng)態(tài)狀態(tài)來(lái)添加以實(shí)現(xiàn)樣式的動(dòng)態(tài)變化。其功能與類相似,但是后者在文檔中存在有class的靜態(tài)標(biāo)志,而偽類不存在于文檔中,它屬于文檔之外的抽象的類,故稱為偽類。(當(dāng)元素處于某種狀態(tài)下時(shí),假裝這里有某個(gè)類)3*)
偽元素的種類:
從偽元素的分類中我們可以看出,偽類可以對(duì)元素的特定內(nèi)容進(jìn)行操作(如:first-letter等)。類似像文本的第一個(gè)字母添加特殊樣式這種效果,在普通選擇器中是無(wú)法實(shí)現(xiàn)的(除非對(duì)文本中的第一個(gè)字母添加標(biāo)簽使其成為元素)。偽元素的控制內(nèi)容與元素是一致的,但是偽元素不存在于文檔中,是一個(gè)抽象的元素,故稱為偽元素。
舉個(gè)例子(偽元素):
使用偽元素:
<p>Angry birds</p> p:first-letter {color: #00FF00;}不使用偽元素達(dá)到以上效果:
<p><span class="changeColor">A</span>ngry birds! </p> .changeColor {color:#00FF00;}前者通過(guò)偽元素對(duì)元素內(nèi)容進(jìn)行操作,對(duì)于后者而言,是對(duì)元素的直接操作,二者效果是一致的。不過(guò),偽元素不實(shí)際存在文檔中。
轉(zhuǎn)載于:https://www.cnblogs.com/zhengwin7/p/5237127.html
總結(jié)
以上是生活随笔為你收集整理的伪类 伪元素 如何区分的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 最近项目用到Dubbo框架,临时抱佛脚分
- 下一篇: Kylin的cube模型