css中偽類:after的用法(三種方式)
發(fā)布時(shí)間:2013-02-01 10:43:22 作者:佚名
我要評(píng)論

CSS中存在一些比較特殊的屬性,稱之為偽類,它們之中最常用的就是定義鏈接的偽:link,:visited,:hover,:active等本文詳細(xì)介紹一下after的用法的用法,感興趣的朋友可以了解下,或許對(duì)你有所幫助
CSS中存在一些比較特殊的屬性,稱之為偽類,它們之中最常用的就是定義鏈接的偽:link,:visited,:hover,:active等。
除了它們,還有一些不被常使用的偽類,有:focus,:first-child,:lang等。
而且CSS里不光有偽類,還有偽元素,比如::first-letter,:first-line,:before和:after。
本文中其它偽元素暫且不表,單說(shuō):after偽元素。
after顧名思義是在元素后面的意思,實(shí)質(zhì)是在元素之后添加內(nèi)容。
這個(gè)偽元素允許制作人員在元素內(nèi)容的最后面插入生成內(nèi)容,需要和content屬性一起使用,設(shè)置在對(duì)象后發(fā)生的內(nèi)容。默認(rèn)地,這個(gè)偽元素是inline行內(nèi)元素,不過(guò)可以使用屬性 display 改變這一點(diǎn)。
所有主流瀏覽器都支持 :after 偽元素,但對(duì)于IE來(lái)說(shuō),只有IE8以上版本支持。
下面舉個(gè)例子,在CSS代碼中插入:
<style type="text/css">
h1:after {content:url(logo.gif)}
</style> <h1>標(biāo)題內(nèi)容</h1>
在顯示時(shí),標(biāo)題內(nèi)容后會(huì)插入一張圖片。這就是偽元素:after的作用。
:after偽類的content還可以跟其它的參數(shù),
一:字符串 例如:
<style type="text/css">
.test:after{content:"測(cè)試代碼"};
</style>
<div class="test">測(cè)試div:</div>運(yùn)行結(jié)果顯示為:測(cè)試div:測(cè)試代碼
二:attr(x),attr是屬性的意思,顧名思義,就是讀取該類節(jié)點(diǎn)的屬性 例如:
<style type="text/css">
.test:after{content:attr(id)};
</style>
<div class="test" id="aaa">測(cè)試div的id為:</div>運(yùn)行結(jié)果顯示為:測(cè)試div的id為:aaa
三:固定參數(shù)
close-quote:插入 quotes 屬性的后標(biāo)記
no-close-quote :并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級(jí)別
open-quote:插入 quotes 屬性的前標(biāo)記
no-open-quote:并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級(jí)別
除了它們,還有一些不被常使用的偽類,有:focus,:first-child,:lang等。
而且CSS里不光有偽類,還有偽元素,比如::first-letter,:first-line,:before和:after。
本文中其它偽元素暫且不表,單說(shuō):after偽元素。
after顧名思義是在元素后面的意思,實(shí)質(zhì)是在元素之后添加內(nèi)容。
這個(gè)偽元素允許制作人員在元素內(nèi)容的最后面插入生成內(nèi)容,需要和content屬性一起使用,設(shè)置在對(duì)象后發(fā)生的內(nèi)容。默認(rèn)地,這個(gè)偽元素是inline行內(nèi)元素,不過(guò)可以使用屬性 display 改變這一點(diǎn)。
所有主流瀏覽器都支持 :after 偽元素,但對(duì)于IE來(lái)說(shuō),只有IE8以上版本支持。
下面舉個(gè)例子,在CSS代碼中插入:
復(fù)制代碼
代碼如下:<style type="text/css">
h1:after {content:url(logo.gif)}
</style> <h1>標(biāo)題內(nèi)容</h1>
在顯示時(shí),標(biāo)題內(nèi)容后會(huì)插入一張圖片。這就是偽元素:after的作用。
:after偽類的content還可以跟其它的參數(shù),
一:字符串 例如:
復(fù)制代碼
代碼如下:<style type="text/css">
.test:after{content:"測(cè)試代碼"};
</style>
<div class="test">測(cè)試div:</div>運(yùn)行結(jié)果顯示為:測(cè)試div:測(cè)試代碼
二:attr(x),attr是屬性的意思,顧名思義,就是讀取該類節(jié)點(diǎn)的屬性 例如:
復(fù)制代碼
代碼如下:<style type="text/css">
.test:after{content:attr(id)};
</style>
<div class="test" id="aaa">測(cè)試div的id為:</div>運(yùn)行結(jié)果顯示為:測(cè)試div的id為:aaa
三:固定參數(shù)
close-quote:插入 quotes 屬性的后標(biāo)記
no-close-quote :并不插入 quotes 屬性的后標(biāo)記。但增加其嵌套級(jí)別
open-quote:插入 quotes 屬性的前標(biāo)記
no-open-quote:并不插入 quotes 屬性的前標(biāo)記。但減少其嵌套級(jí)別
相關(guān)文章
- a標(biāo)簽的visied偽類的定義使用火狐還是ie都無(wú)法顯示訪問(wèn)后的圖片狀態(tài),據(jù)說(shuō)從 Fx4 開(kāi)始,能夠應(yīng)用的樣式是受限的,感興趣的朋友可以了解下2013-08-18
a標(biāo)簽的四個(gè)css偽類(link、visited、hover、active)樣式理解
偽類是CSS 用于向某些選擇器添加特殊的效果,chrome和firefox中的css監(jiān)控并不會(huì)顯示所有的樣式,有些顯示會(huì)有點(diǎn)不全,IE下還是有點(diǎn)問(wèn)題的,不過(guò)大體不變2013-05-30- css偽類偽元素域高級(jí)選擇器的介紹,需要的朋友可以參考一下2013-02-26
應(yīng)用before/after偽類時(shí)如何CSS命名以及針對(duì)ie6/ie7瀏覽器兼容
before/after偽類相當(dāng)于在元素內(nèi)部插入兩個(gè)額外的標(biāo)簽,其最適合也是最推薦的應(yīng)用就是圖形生成,本文簡(jiǎn)單展示我在實(shí)際項(xiàng)目中,應(yīng)用before/after偽類時(shí)候,如何CSS命名的,HT2013-01-08ie6不支持hover ie6 標(biāo)簽(除a標(biāo)簽)不支持偽類:hover解決方案
ie6環(huán)境下好多的標(biāo)簽除a標(biāo)簽都不支持偽類:hover,本人很是疑惑,于是搜集整理一番,曬出來(lái)和大家分享,希望對(duì)你們有幫助2012-12-21CSS中a標(biāo)簽樣式的“愛(ài)恨”原則:定義鏈接樣式的四個(gè)偽類
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。本文將詳細(xì)介紹經(jīng)常用于定義鏈接樣式的四個(gè)偽類,需要的朋友可以參考下2012-12-10有關(guān)于a標(biāo)簽的4個(gè)偽類的使用方法
上面是偽類的正確順序,簡(jiǎn)稱 lvha(love-ha)。你一直知道這個(gè)順序但是為什么這樣呢?原理是怎么樣的?2011-07-22a標(biāo)簽偽類的作用及書(shū)寫(xiě)順序是什么
a標(biāo)簽的偽類只不過(guò)是又結(jié)合了不同的動(dòng)作順序,動(dòng)作的觸發(fā)順序決定了偽類的順序必須按lvha來(lái)寫(xiě),接下來(lái)為大家詳細(xì)介紹下,感興趣的朋友不妨參考下2013-09-27