首頁 >web前端 >css教學 >css3如何利用選擇器在頁面中插入所需內容（附程式碼）

css3如何利用選擇器在頁面中插入所需內容（附程式碼）

不言原創: 2018-08-24 10:27:082033瀏覽

這篇文章帶給大家的內容是關於css3如何利用選擇器在頁面中插入所需內容，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1 使用選擇器來插入內容

使用after或before選擇器，在選擇器的content屬性中定義要插入的內容，當插入內容為文字的時候，必須要在插入文字的兩旁加上單引號或雙引號。

<style type="text/css">
h2:before{  content：‘COLUMN’；}
</style>

2 指定個別元素不進行插入

使用content屬性的none屬性值

<style type="text/css">
h2.sample:before{  content：none；}
</style>

3 插入映像檔

<style type="text/css">
h2:before{  content：url(mark.png)；}
</style>

4 將alt屬性的值作為圖像的標題來顯示

在content屬性中透過指定「attr（屬性名）」的形式，可以將某個屬性的屬性值顯示出來。

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

5 使用content屬性來插入項目編號

（1）在多個標題前加上連續編號

1、在content屬性中使用counter屬性值來針對多個項目追加連續編號

b49088b7227480a0e30ff682ffc96975：before{ content：counter（計數器名稱）；}（使用計數器來計算編號，計數器可任意命名）

2、還需要在元素的樣式中追加對元素的counter-increment屬性的指定，為了使用連續編號，需要將counter-increment屬性的屬性值值設定為before選擇器或after選擇器的counter屬性值中所指定的計數器名稱。

b49088b7227480a0e30ff682ffc96975{ counter-increment：before選擇器或after選擇器中指定的計數器名稱}

h1：before｛content：counter（mycounter）；｝
h1｛counter-increment：mycounter；｝//1、2、3.......

（2）在項目編號中追加文字

h1：before｛content：‘第’counter（mycounter）‘章’；｝//第1章大标题、第2章大标题.........

（3）指定編號的種類

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

content：counter（計數器名，編號種類）

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

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

（4）編號巢狀

h1：before｛content：counter（mycounter）；｝//1（1、2、3...）、2（1、2、3...）、........
h1｛counter-increment：mycounter；counter-reset:subcounter;｝(将中编号进行重置)
h2：before｛content：counter（subcounter）；｝
h2｛counter-increment：subcounter；margin-left:40px｝

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

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

（6）在字串兩邊加上巢狀文字符號

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

2、open-quote屬性值用於新增開始的巢狀文字符號，close-quote屬性值用於新增結尾的嵌套文字符號。

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

h1:before{  content:open-quote; }
h1:after { content:close-quote; }
h1{   quotes:"(" ")"   }//形如:   （标题）

css3如何利用選擇器在頁面中插入所需內容 （附程式碼）