}
p::before{
content:counter(p)’.’;
margin-left:40px;
}
p{
countercounter-increment:p;
}
运行结果：
https://jsfiddle.net/dwqs/2k5qbz51/
在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:
CSS Code复制内容到剪贴板
h1{
countercounter-increment:h;
countercounter-reset:p;
}
这样，编号就重置了，看看结果：
https://jsfiddle.net/dwqs/hfutu4Lq/
还可以实现更复杂的嵌套，例如三层嵌套。
html:
XML/HTML Code复制内容到剪贴板
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
css:
CSS Code复制内容到剪贴板
h1::before{
content:counter(h1)’.’;
}
h1{
countercounter-increment:h1;
countercounter-reset:h2;
}
h2::before{
content:counter(h1) ‘-‘ counter(h2);
}
h2{
countercounter-increment:h2;
countercounter-reset:h3;
margin-left:40px;
}
h3::before{
content:counter(h1) ‘-‘ counter(h2) ‘-‘ counter(h3);
}
h3{
countercounter-increment:h3;
margin-left:80px;
}
运行结果：
https://jsfiddle.net/dwqs/wuuckquy/
