会看到标红的部分的序号显示异常了！
为何会出现这个问题，我们看下HTML（主要是注释）：
复制代码
<div class=”reset”>
<div class=”counter”>我是王小二</div>
<div class=”reset”><– 这里的reset与上面的counter是兄弟关系，而不是父子关系。虽然布局渲染上没有差异。但是，一个容器的reset的唯一的，一旦子元素出现reset，会改变整个容器的嵌套关系，于是，后面的“王小三”、“王小四”其实已经进入了2级嵌套，因此显示的是1-3和1-4 –>
…
</div>
<div class=”counter”>我是王小三</div>
<div class=”counter”>我是王小四</div>
<div class=”reset”>
<div class=”counter”>我是王小四的大儿子</div>
</div>
</div>
如果上面的注释没看明白，您可以跟前面没有问题的demo做下HTML结构对比，或许就会豁然开朗！
⑤ counters()也是支持style自定义递增形式的。
counters(name, string, style)
与counter()的style参数使用一致，不赘述。
四、CSS计数器与display:none挖挖挖
一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
五、CSS计数器实际应用挖挖挖
相比传统的ol,ul列表计数，CSS计数器的优势就在于灵活与强大，不足就是IE6/IE7不支持。
普照规则第一条，普照源唯一。所以，我们可以在头尾放两个差距甚远的列表，然后，这些列表自动显示序号。而ol/ul只能写死start实现，很不灵活，一旦列表有删减，就嗝屁了。
由于计数器是伪元素控制显示的。因此，我们几乎可以应用各种CSS样式，各种定位等。所以，基本上，只要有有序序号呈现的地方，就能使用CSS计数器。
例如，电商首页的图片slide广告上的1,2,3,4,…序号；
我们做分享时候使用的HTML5 web在线幻灯片就可以使用CSS计数器标注页数等；以及一开始给小伙伴们做的果汁工具的3个选择等。
我下笔之初本想搞几个高保真的例子的，写到这里发现，内容已经很多了。一篇技术文章，如果读了2分钟，发现才读了一半，后面的内容就会闪电过，然后会有些莫名的评论之类。因此，文章不易过长。所以，这里就要收尾了！
六、最后的挖掘总结
CSS计数器的斗量果然很深啊。如果不静心思考，会陷入很多想当然的误区。如果不全面学习，也无法感受到CSS计数器的强大潜力所在。就我自己而言，着实挖到大宝贝了。不知在座的诸位的挖掘成果如何呢？
