HTML.5使用选择器在页面中插入内容

使用选择器在元素前面插入内容,例如:h2:before{content:"¥";}
使用选择器在元素后面插入内容,流入:h2:after{content:"元";}
同时,在before和after中,还可以设置color、background、font-family、padding、margin、border等样式

可以指定个别元素不进行插入内容
例如上面的h2,是给页面上所有h2添加内容;
而h2.tit:before{content:none;}则表示针对class=tit的h2不进行插入内容

还可以通过content插入图片文件,例如:还h2:before{content:url(mark.png);},需要注意的是,在插入图像时,需要使用url属性值来指定图像文件的路径。目前Firefox、Safari、Opera浏览器都支持这种插入图像文件的功能,在IE8只支持插入文字的功能,不支持插入图像文件的功能。另外,在CSS3的定义中,可以通过url属性来插入音频文件、视频文件等其它格式的文件。但目前还没有得到浏览器的支持。

通过content插入图片文件的好处,通过content插入图片文件是用css方式在页面显示图像,给浏览器节省解析html中img标签的大量时间;同时,在普通的css中在页面插入图像,是通过背景的方式显示的,而content则不同于使用背景图像,普通css背景的方式,在打印时,设置了不打印背景,则打印出的网页会失去背景图像,而content设置图像中,即使取消背景打印,图像也不会丢失。

将alt属性的值作为图像的标题来显示,如果在content属性中通过"attr(属性名)"这种形式来指定attr属性值,可以将某个属性的属性值显示出来。例如:<img src="sky.jpg" alt="蓝天白云" /> img:after{content:attr(alt);display:block;text-align:center;margin-top:5px;}

使用content 属性来插入项目编号:
     在多个标题前价格连续编号,在content属性中使用coounter属性值来针对多个项目追加连续编号,例如:<元素>:before{content:counter(计数器名);} 代码如下:
h1:before{content:counter(mycounter);}
需要注意的是,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。
h1{counter-increment:mycounter;}
html如下:<h1>大标题</h1><h1>大标题</h1><h1>大标题</h1>
结果如下:
1大标题
2大标题
3大标题

可以在编号中追加文字,例如:h1:before{content:'第'counter(mycounter)'章';}
则运行结果如下:
第1章大标题
第2章大标题
第3章大标题

指定编号的种类,content:counter(计数器名,编号种类),使用"upper-alpha"属性指定大写字母编号;使用"upper-roman"属性指定大写罗马字母,代码如下:
h1:before{content:counter(mycounter,upper-alpha)'.';},运行结果如下
A.大标题
B.大标题
C.大标题

编号嵌套,可以在大编号中嵌套中编号,在中编号中嵌套小编号
h1:before{content:counter(mycounter)'.';}
h1{counter-increment:mycounter;}
h2:before{conter:counter(subcounter)'.';}
h2{counter-increment:subcounter;}
运行结果如下:
1.大标题
    1.中标题
    2.中标题
2.大标题
    3.中标题
    4.中标题
如果要将第二个大标题里的中标题重新开始编号的话,需要在大标题中使用counter-reset属性将中编号进行重置
例如:h1{counter-increment:mycounter;counter-reset:subcounter;}
运行结果如下:
1.大标题
    1.中标题
    2.中标题
2.大标题
    1.中标题
    2.中标题

中编号中嵌入大编号
h2:before{content:counter(mycounter) '-' counter(subcounter)'.';}

在字符串两边添加嵌套文字符号,可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号,单引号,双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。例如:
h1:before{content:open-quote;}
h1:after{content:close-quote;}
h1{quotes:"("")";}
<h1>标题</h1>
运行结果:(标题)