您好,登錄后才能下訂單哦!
這篇文章運(yùn)用簡單易懂的例子給大家介紹如何利用css3在選擇器中的頁面中插入所需內(nèi)容 ,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
使用after或before選擇器,在選擇器的content屬性中定義要插入的內(nèi)容,當(dāng)插入內(nèi)容為文字的時(shí)候,必須要在插入文字的兩旁加上單引號(hào)或者雙引號(hào)。
<style type="text/css"> h3:before{ content:‘COLUMN’;} </style>
使用content屬性的none屬性值
<style type="text/css"> h3.sample:before{ content:none;} </style>
<style type="text/css"> h3:before{ content:url(mark.png);} </style>
在content屬性中通過指定“attr(屬性名)”的形式 ,可以將某個(gè)屬性的屬性值顯示出來。
img:after{ content:attr(alt); display:block; text-align:center; }
1、在content屬性中使用counter屬性值來針對(duì)多個(gè)項(xiàng)目追加連續(xù)編號(hào)
<元素>:before{ content:counter(計(jì)數(shù)器名);}(使用計(jì)數(shù)器來計(jì)算編號(hào),計(jì)數(shù)器可任意命名)
2、還需要在元素的樣式中追加對(duì)元素的counter-increment屬性的指定,為了使用連續(xù)編號(hào),需要將counter-increment屬性的屬性值值設(shè)定為before選擇器或after選擇器的counter屬性值中所指定的計(jì)數(shù)器名。
<元素>{ counter-increment:before選擇器或after選擇器中指定的計(jì)數(shù)器名 }
h2:before{content:counter(mycounter);} h2{counter-increment:mycounter;}//1、2、3.......
h2:before{content:‘第’counter(mycounter)‘章’;}//第1章大標(biāo)題、第2章大標(biāo)題.........
1.用before選擇器或after選擇器的content屬性,不僅可以追加數(shù)字編號(hào),還可以追加字母編號(hào)或羅馬數(shù)字編號(hào)。
content:counter(計(jì)數(shù)器名,編號(hào)種類)
2.可以使用list-style-type屬性的值來指定編號(hào)的種類,如大寫字母編號(hào)時(shí),使用 “upper-alpha”屬性,指定大寫羅馬字母時(shí)用“upper-roman”屬性。
h2:before{content:counter(mycounter,upper-alpha)‘.’;}// A.、B.、C.、
h2:before{content:counter(mycounter);}//1(1、2、3...)、2(1、2、3...)、........ h2{counter-increment:mycounter;counter-reset:subcounter;}(將中編號(hào)進(jìn)行重置) h3:before{content:counter(subcounter);} h3{counter-increment:subcounter;margin-left:40px}
h3:before{content:counter(mycounter)‘-’ counter(subcounter)‘.’;}//1-1、1-2
1、可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號(hào)、單引號(hào)、雙引號(hào)之類的嵌套文字符號(hào)。
2、open-quote屬性值用于添加開始的嵌套文字符號(hào),close-quote屬性值用于添加結(jié)尾的嵌套文字符號(hào)。
3、在元素的樣式中使用quotes屬性來指定使用什么嵌套文字符號(hào)
h2:before{ content:open-quote; } h2:after { content:close-quote; } h2{ quotes:"(" ")" }//形如: (標(biāo)題)
關(guān)于如何利用css3在選擇器中的頁面中插入所需內(nèi)容 就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。