這篇文章運(yùn)用簡單易懂的例子給大家介紹如何利用css3在選擇器中的頁面中插入所需內(nèi)容 ，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、做網(wǎng)站、瑪多網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、瑪多網(wǎng)絡(luò)營銷、瑪多企業(yè)策劃、瑪多品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供瑪多建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

1 使用選擇器來插入內(nèi)容

使用after或before選擇器，在選擇器的content屬性中定義要插入的內(nèi)容，當(dāng)插入內(nèi)容為文字的時(shí)候，必須要在插入文字的兩旁加上單引號或者雙引號。

2 指定個(gè)別元素不進(jìn)行插入

使用content屬性的none屬性值

3  插入圖像文件

4  將alt屬性的值作為圖像的標(biāo)題來顯示

在content屬性中通過指定“attr（屬性名）”的形式 ，可以將某個(gè)屬性的屬性值顯示出來。

img:after{
content:attr(alt);
display:block;
text-align:center;
}

5 使用content屬性來插入項(xiàng)目編號

（1）在多個(gè)標(biāo)題前加上連續(xù)編號

1、在content屬性中使用counter屬性值來針對多個(gè)項(xiàng)目追加連續(xù)編號

<元素>：before{ content：counter（計(jì)數(shù)器名）；}（使用計(jì)數(shù)器來計(jì)算編號，計(jì)數(shù)器可任意命名）

2、還需要在元素的樣式中追加對元素的counter-increment屬性的指定，為了使用連續(xù)編號，需要將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.......

（2）在項(xiàng)目編號中追加文字

h2：before｛content：‘第’counter（mycounter）‘章’；｝//第1章大標(biāo)題、第2章大標(biāo)題.........

（3）指定編號的種類

1.用before選擇器或after選擇器的content屬性，不僅可以追加數(shù)字編號，還可以追加字母編號或羅馬數(shù)字編號。

content：counter（計(jì)數(shù)器名，編號種類）

2.可以使用list-style-type屬性的值來指定編號的種類，如大寫字母編號時(shí)，使用 “upper-alpha”屬性，指定大寫羅馬字母時(shí)用“upper-roman”屬性。

h2：before｛content：counter（mycounter，upper-alpha）‘.’；｝// A.、B.、C.、

（4）編號嵌套

h2：before｛content：counter（mycounter）；｝//1（1、2、3...）、2（1、2、3...）、........
h2｛counter-increment：mycounter；counter-reset:subcounter;｝(將中編號進(jìn)行重置)
h3：before｛content：counter（subcounter）；｝
h3｛counter-increment：subcounter；margin-left:40px｝

（5）中編號中嵌入大編號

h3：before｛content：counter（mycounter）‘-’ counter（subcounter）‘.’；｝//1-1、1-2

（6）在字符串兩邊添加嵌套文字符號

1、可以使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。

2、open-quote屬性值用于添加開始的嵌套文字符號，close-quote屬性值用于添加結(jié)尾的嵌套文字符號。

3、在元素的樣式中使用quotes屬性來指定使用什么嵌套文字符號

h2:before{  content:open-quote; }
h2:after { content:close-quote; }
h2{   quotes:"(" ")"   }//形如:   （標(biāo)題）

關(guān)于如何利用css3在選擇器中的頁面中插入所需內(nèi)容 就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。