CSS-COUNTER-INCREMENT

最近碰到一个小需求，在web页面中展示一些规则和条款，并自动对规则和条款进行排序，但规则和条款的数目不定。以前浏览博客时，隐约记得CSS有一个计数器。通过查阅MDN后，了解到CSS计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

基本的效果如下所示:

See the Pen CSS-COUNTER-INCREMENT by Derek (@zhangdeyu) on CodePen.

但有时候有一些特殊需求，比如在中文环境下，每一节用一、二、三、四汉语数字表示，每一条内容用阿拉伯数字表示。遇到这种情况怎么解决呢？
通过GOOGLE，发现CSS TRICKS里面的一篇文章Numbering In Style对这些情况进行了解释。counter()支持第二个参数 counter(name, style)。这里的style就是list-style-type所支持的值。这些值里面就有cjk-ideographic simp-chinese-informal，可以完美的解决这种需求。

See the Pen CSS-COUNTER-INCREMENT custom by Derek (@zhangdeyu) on CodePen.