第一部分：基礎(chǔ)知識(shí)
1.與:active 和 :hover這些偽類不一樣，他們都是偽元素。
2.:before/:after偽元素是在css2中提出來(lái)的。而::before/::after是在css3中的寫法，這樣從新提出是為了用兩個(gè)冒號(hào)表示偽元素以區(qū)分偽類。
3.它們用在css里某個(gè)選擇器之后，為了增添裝飾性內(nèi)容的，因?yàn)檫@樣可以實(shí)現(xiàn)語(yǔ)義化，如果用html來(lái)添加一些沒(méi)有實(shí)際內(nèi)容的節(jié)點(diǎn)或者輔助式樣本的文本，他們是毫無(wú)意義的。
4.它們有特有的屬性content，其中添加的內(nèi)容默認(rèn)是內(nèi)聯(lián)元素。
5.創(chuàng)建的偽元素默認(rèn)是在所依附的元素之上的，我們可以使用z-index:-1;把它放到下面去。
6.它們是虛擬節(jié)點(diǎn)，而不是真正的節(jié)點(diǎn)。如：
div::after{ content: " "; border:thin solid red; }我們?cè)跒g覽器可以看到：
::after并不是一個(gè)真實(shí)節(jié)點(diǎn)，實(shí)際上我們?cè)谝恍┚W(wǎng)站上經(jīng)常可以看到它們的使用。
6.input，img，iframe等元素都不能包含其他元素，所以不能通過(guò)偽元素插入內(nèi)容。
第二部分：應(yīng)用
1.做間隔符。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>偽元素</title> <style> a{ color:blue; text-decoration: none; } .log:after{ content:"|"; color:red; } </style></head><body> <a href="" class="log">登錄</a><a href="">注冊(cè)</a></body></html>效果如下：
2.做三角形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>偽元素</title> <style> a{ color:blue; text-decoration: none; } .log:before{ content:" "; display: inline-block; width: 0; height: 0; border:10px solid transparent; border-left: 10px solid red; } </style></head><body> <a href="" class="log">登錄</a></body></html>效果如下所示：
3.清除浮動(dòng)(下面內(nèi)容取自張?chǎng)涡翊笊?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>偽元素</title> <style> .box{padding:10px; background:gray;} .fix{*zoom:1;} .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;} .l{float:left;} </style></head><body> <div class="box fix"> <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /></div></body></html>效果如下：
注意：其中*zoom:1;是用來(lái)在IE6中清除浮動(dòng)的（用在浮動(dòng)元素的父元素上）。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
