CSS3 content属性的学习

1、css3 content属性的学习css属性【content】用来和:after及:before伪元素一起用法，在对象前或后显示内容。content的取值：normal：默认值。表现与none值相同none：不生成任何值。：插入标签属性值：用法指定的肯定或相对地址插入一个外部资源（图像，声频，视频或扫瞄器支持的其他任何资源）：插入字符串counter(name)：用法已命名的计数器counter(name,list-style-type)：用法已命名的计数器并遵从指定的list-style-type属性counters(name,string)：用法全部已命名的计数器counters(name

2、,string,list-style-type)：用法全部已命名的计数器并遵从指定的list-style-type属性no-close-quote：并不插入quotes属性的后标志。但增强其嵌套级别no-open-quote：并不插入quotes属性的前标志。但削减其嵌套级别close-quote：插入quotes属性的后标志open-quote：插入quotes属性的前标志这里比较不好理解的取值就是：counter(name)这些；下面主要总结一下这块，最后会给出各个取值的demo，比如我有如下html结构：这个是a方案这个是a方案这个是a方案这个是a方案这个是a方案我要在每个li的后面加上

3、当前li【index】值：ul licounter-increment:index;ul li:aftercontent:'统计：'counter(index);display:block;line-height:35px;说明：count(name)这里的name，必需要提前指定好，否则全部的值都将是0；count(name,list-style-type)这里的list-style-type就是css中list-style-type属性的取值；下面给出完整democss content.string p:after margin-left: -16px;background

4、: fff;content: "支持"color: f00;.attr p:after content: attr(title);.url p:before content: url(display: block;.test ol margin: 16px 0;padding: 0;list-style: none;.counter1 li counter-increment: testname;.counter1 li:before content: counter(testname)":"color: f00;font

5、-family: georgia,serif,sans-serif;.counter2 li counter-increment: testname2;.counter2 li:before content: counter(testname2,lower-roman)":"color: f00;font-family: georgia,serif,sans-serif;.counter3 ol ol margin: 0 0 0 28px;.counter3 li padding: 2px 0;counter-increment: testname3;.co

6、unter3 li:before content: counter(testname3,float)":"color: f00;font-family: georgia,serif,sans-serif;.counter3 li li counter-increment: testname4;.counter3 li li:before content: counter(testname3,decimal)"."counter(testname4,decimal)":".counter3

7、 li li li counter-increment: testname5;.counter3 li li li:before content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":"string：你的扫瞄器是否支持content属性：否attr：url()：假如你看到我的头像则解释你目前用法的扫瞄器支持content属性counter(name)：列表项