本篇文章給大家帶來的內容是關於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屬性值來針對多重專案追加連續編號
<元素>:before{ content:counter(計數器名);}(使用計數器來計算編號,計數器可任意命名)
2、還需要在元素的樣式中追加對元素的counter-increment屬性的指定,為了使用連續編號,需要將counter-increment屬性的屬性值值設定為before選取器或after選取器的counter屬性值中所指定的計數器名。
<元素>{ 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:"(" ")" }//形如: (標題)