关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文:《CSS计数器(序列数字字符自动递增)详解》,这里做个记录,写个demo
content-increment
-
默认时的计数器:
- 列表项
- 列表项
- 列表项
-
修改计数器每次增加的值为2:
- 列表项
- 列表项
- 列表项
-
修改计数器每次增加的值为-1:
- 列表项
- 列表项
- 列表项
-
修改计数器以罗马字符显示:
- 列表项
- 列表项
- 列表项
-
计数器以嵌套计数显示:
- 父级
- 父级
- 子级1
- 子级2
- 子级3
- 父级
- 子级1
- 子级2
- 子级3
- 父级
兼容情况还不错: