你可能不知道的 CSS 计数器( 二 ) _CSS

如果懂了作用域的关系，接下来就可以通过 counter() 或者 counters() 函数进行展示。
counter
Counter 显示代码如下：
OL { counter-reset: item }LI { display: block }LI:before { content: counter(item) ". "; counter-increment: item}效果如下：

文章插图

可以看到 counter 只会显示当前作用域下计数器的值，如果要生成嵌套作用域的计数器就得用 counters 函数。
counters
OL { counter-reset: item }LI { display: block }LI:before { content: counters(item, '.') " "; counter-increment: item;}

文章插图

更换格式在显示计数器部分 counter 和 counters 都有一个可选参数，显示风格，这个显示风格跟 list-style-type[7] 是一样的，比如我们将文章开头的例子拿来举例，默认是 decimal 风格，比如换成字母(type 是 lower-latin)形式，css 如下：
div { counter-reset: title; /* 重置计数器成0 */}h3:before { counter-increment: title; /* 增加计数器值 */ content: "Title " counter(title, lower-latin) ": "; /* 显示计数器 */}效果如下，list-style-type 有很多种，甚至还有中文(list-style-type 是 cjk-ideographic)的。

文章插图

自定义起始值起始值订为 5
div { counter-reset: title 5; /*起始值订为 5 */}h3:before { counter-increment: title; content: "Title " counter(title) ": ";}

文章插图

自定义每次递增的值每次递增的值为 2
div { counter-reset: title 5;}h3:before { counter-increment: title 2; /* 每次递增的值为 2 */ content: "Title " counter(title) ": ";}