CSS3 使用选择器在页面插入内容

使用选择器来插入文字

h2：before{
                        content：‘COLUMN’;
                        color：white；
                        background-color：orange；
                        padding：1px 5px;
          }

注意点：

1. 使用content插入的内容要打单引号或双引号

2. 可以对插入的内容设置样式

   对个别元素不进行插入

h2.sample.before{
                        content：none；
                 }
h2.sample.before{
                        content：normal；
                 }                 --表示h2中class为sample的不插入内容--

none属性和normal属性用法相同，但是需要说明的是，从CSS2.1开始，只有当使用before和after选择器的时候，normal属性才与none相同，都是不让选择器在个别元素后插入内容。但是none只能用在这两个选择器中，二normal还可以用于其他的CSS3选择器。

插入图像文件

h2：before{
                        content：url（mark.png）；
                        }

css3的定义中还可以通过url属性来插入音频、视频等其他格式的文件，目前没有浏览器支持。

插入图像文件的好处

1. 为页面节约大量的编写时间

2. 与在样式表中追加图片做背景相比，在打印的时候，如果选择不打印背景的话，使用before选择器追加的图片能正常打印，加为背景图片的不能打印。

   将alt属性的值作为图像的标题来显示

//css
img:after{content:attr(alt);}
//html
<img src="1.png" alt="hahaha">

hahaha将以文字的形式显示在网页上。

这个属性目前只有Opera10支持

使用content属性来插入项目编号

在多个标题前加上连续编号：在content属性中使用counter属性来针对多个项目追加连续编号另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中指定的计数器名。

h1：before{
               content：counter（mycounter）；
           }
h1{
                counter-increment：mycount;
           }

在项目编号中追加文字

h1：before{
              content：‘第’counter（mycounter）'章'；
           }

指定编号的种类：
content：counter（计数器名，编号种类）
upper-roman:大写罗马字母
upper-alpha:大写字母
编号嵌套：可以在大编号中嵌套中编号，在中编号中嵌套小编号。

//大编号：
    h1：before{
                        content：counter（mycounter）；
                        }
    h1{
        counter-increment：mycounter；
        }
    //中编号：
    h2：before{
                        content：counter（subcounter）；
                        }
    h2{
        counter-increment：subcounter；
        }

在这个事例中，中标题的编号是连续的，如果想在第二个大标题里的中标题重新开始编号的话，需要在大标题中添加counter-reset属性，在这事例中counter-reset：subcounter

在字符串两边添加嵌套的文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。注意，当需要添加双引号时，需要使用“”转义字符。

h1:before {content:open-quote;}
h1:after {content:open-quote;}
h1{quote:"("")";}

当需要添加双引号的时候，需要使用“”转译字符

h1{quote:"\" "\";}

转载于:https://www.cnblogs.com/huyuzhu/p/6515423.html