Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"css3怎么用选择器在页面中插入所需内容"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"css3怎么用选择器在页面中插入所需内容"文章能帮助大家解决问题。

1使用选择器来插入内容

使用after或before选择器，在选择器的content属性中定义要插入的内容，当插入内容为文字的时候，必须要在插入文字的两旁加上单引号或者双引号。

h3:before{content：‘COLUMN’;}

2指定个别元素不进行插入

使用content属性的none属性值

h3.sample:before{content：none;}

3插入图像文件

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

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：‘第’counter（mycounter）‘章’;}//第1章大标题、第2章大标题.........

（3）指定编号的种类

1.用before选择器或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。

content：counter（计数器名，编号种类）

2.可以使用list-style-type属性的值来指定编号的种类，如大写字母编号时，使用"upper-alpha"属性，指定大写罗马字母时用"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;}(将中编号进行重置)

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属性值用于添加结尾的嵌套文字符号。

3、在元素的样式中使用quotes属性来指定使用什么嵌套文字符号

h2:before{content:open-quote;}

h2:after{content:close-quote;}

h2{quotes:"("")"}//形如:（标题）

About "css3 how to use the selector to insert the desired content in the page" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.