css3怎么用選擇器在頁面中插入所需內容

這篇文章主要介紹“css3怎么用選擇器在頁面中插入所需內容”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3怎么用選擇器在頁面中插入所需內容”文章能幫助大家解決問題。

　　1使用選擇器來插入內容

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

　　<styletype="text/css">

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

　　</style>

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

　　使用content屬性的none屬性值

　　<styletype="text/css">

　　h3.sample:before{content：none；}

　　</style>

　　3插入圖像文件

　　<styletype="text/css">

　　h3: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選擇器中指定的計數器名}

　　h2：before｛content：counter（mycounter）；｝

　　h2｛counter-increment：mycounter；｝//1、2、3.......

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

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

　　（3）指定編號的種類

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

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

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

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

　　（4）編號嵌套

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

　　h2｛counter-increment：mycounter；counter-reset:subcounter;｝(將中編號進行重置)

　　h3：before｛content：counter（subcounter）；｝

　　h3｛counter-increment：subcounter；margin-left:40px｝

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

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

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

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

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

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

　　h2:before{content:open-quote;}

　　h2:after{content:close-quote;}

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

關于“css3怎么用選擇器在頁面中插入所需內容”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。