CSS3的content属性详解_html/css_WEB-ITnose

CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。

插入纯文字

大标题

大标题

css:

h1::before{    content:counter(h)'.';}h1{    counter-increment:h;}p::before{    content:counter(p)'.';    margin-left:40px;}p{    counter-increment:p;} 

运行结果：https://jsfiddle.net/dwqs/2k5qbz51/
在示例的 输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

h1{    counter-increment:h;    counter-reset:p;} 

这样，编号就重置了，看看结果：https://jsfiddle.net/dwqs/hfutu4Lq/
还可以实现更复杂的嵌套，例如三层嵌套。
html:

大标题
中标题
小标题
小标题
中标题
小标题
小标题
大标题
中标题
小标题
小标题
中标题
小标题
小标题
 

css:

h1::before{    content:counter(h1)'.';}h1{    counter-increment:h1;    counter-reset:h2;}h2::before{    content:counter(h1) '-' counter(h2);}h2{    counter-increment:h2;    counter-reset:h3;    margin-left:40px;}h3::before{    content:counter(h1) '-' counter(h2) '-' counter(h3);}h3{    counter-increment:h3;    margin-left:80px;} 

运行结果：https://jsfiddle.net/dwqs/wuuckquy/

张大大有一篇利用counter实现计数的文章：小tip:CSS计数器+伪类实现数值动态计算与呈现

原文：http://HdhCmsTestido321测试数据/1555.html

查看更多关于CSS3的content属性详解_html/css_WEB-ITnose的详细内容...