css content之counter-reset、content-increment - Canrz
程序员文章站
2022-04-17 09:35:28
...
万万没想到,写了*年前端,有不会用的css,居然还有完全没听过、见过的css属性,而且还是CSS2的内容!
关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文:《CSS计数器(序列数字字符自动递增)详解》,这里做个记录,写个demo
content-increment
-
默认时的计数器:
- 列表项
- 列表项
- 列表项
-
修改计数器每次增加的值为2:
- 列表项
- 列表项
- 列表项
-
修改计数器每次增加的值为-1:
- 列表项
- 列表项
- 列表项
-
修改计数器以罗马字符显示:
- 列表项
- 列表项
- 列表项
-
计数器以嵌套计数显示:
- 父级
- 父级
- 子级1
- 子级2
- 子级3
- 父级
- 子级1
- 子级2
- 子级3
- 父级
兼容情况还不错:
上一篇: php框架需要掌握什么
推荐阅读
-
css content之counter-reset、content-increment_html/css_WEB-ITnose
-
css content之counter-reset、content-increment - Canrz
-
Flexible 弹性盒子模型之CSS justify-content 属性
-
css content之counter-reset、content-increment_html/css_WEB-ITnose
-
css content之counter-reset、content-increment - Canrz
-
Flexible 弹性盒子模型之CSS justify-content 属性