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怎么用选择器在页面中插入所需内容”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网VUE频道，小编每天都会为大家更新不同的知识点。