這篇文章主要介紹“css3怎么用選擇器在頁(yè)面中插入所需內(nèi)容”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3怎么用選擇器在頁(yè)面中插入所需內(nèi)容”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)建站是一家以網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、網(wǎng)站推廣、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為軟裝設(shè)計(jì)等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

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

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

<styletype="text/css">

h3:before{content：&lsquo;COLUMN&rsquo;；}

</style>

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

使用content屬性的none屬性值

<styletype="text/css">

h3.sample:before{content：none；}

</style>

3插入圖像文件

<styletype="text/css">

h3:before{content：url(mark.png)；}

</style>

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

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

img:after{

content:attr(alt);

display:block;

text-align:center;

}

5使用content屬性來(lái)插入項(xiàng)目編號(hào)

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

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

<元素>：before{content：counter（計(jì)數(shù)器名）；}（使用計(jì)數(shù)器來(lái)計(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.......

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

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

（3）指定編號(hào)的種類

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

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

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

h2：before｛content：counter（mycounter，upper-alpha）&lsquo;.&rsquo;；｝//A.、B.、C.、

（4）編號(hào)嵌套

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｝

（5）中編號(hào)中嵌入大編號(hào)

h3：before｛content：counter（mycounter）&lsquo;-&rsquo;counter（subcounter）&lsquo;.&rsquo;；｝//1-1、1-2

（6）在字符串兩邊添加嵌套文字符號(hào)

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屬性來(lái)指定使用什么嵌套文字符號(hào)

h2:before{content:open-quote;}

h2:after{content:close-quote;}

h2{quotes:"("")"}//形如:（標(biāo)題）

關(guān)于“css3怎么用選擇器在頁(yè)面中插入所需內(nèi)容”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

網(wǎng)站欄目：css3怎么用選擇器在頁(yè)面中插入所需內(nèi)容
網(wǎng)站鏈接：http://chinadenli.net/article26/joijjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、定制開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、微信公眾號(hào)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)