css content之counter-reset、content-increment_html/css_WEB-ITnose
程序员文章站
2022-03-27 11:07:20
...
万万没想到,写了*年前端,有不会用的css,居然还有完全没听过、见过的css属性,而且还是CSS2的内容!
关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文:《CSS计数器(序列数字字符自动递增)详解》,这里做个记录,写个demo
content-increment
- 默认时的计数器:
- 列表项
- 列表项
- 列表项
- 修改计数器每次增加的值为2:
- 列表项
- 列表项
- 列表项
- 修改计数器每次增加的值为-1:
- 列表项
- 列表项
- 列表项
- 修改计数器以罗马字符显示:
- 列表项
- 列表项
- 列表项
-
计数器以嵌套计数显示:
- 父级
- 父级
- 子级1
- 子级2
- 子级3
- 父级
- 子级1
- 子级2
- 子级3
- 父级
兼容情况还不错:
下一篇: Python中取整的几种方法小结
推荐阅读
-
CSS3之圆角_html/css_WEB-ITnose
-
css3中的content和实体_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
html之div始终停留在屏幕中间部分_html/css_WEB-ITnose
-
HTMLä¸ä¸çcontent-typeé¦åæ¯éè¦å¤§åå_html/css_WEB-ITnose
-
CSS 之 核心篇_html/css_WEB-ITnose
-
css学习笔记二之inline-block_html/css_WEB-ITnose
-
页面制作之开发调试工具(1)_html/css_WEB-ITnose
-
meta之renderer_html/css_WEB-ITnose