欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css content之counter-reset、content-increment - Canrz

程序员文章站 2022-03-25 15:33:00
...
万万没想到,写了*年前端,有不会用的css,居然还有完全没听过、见过的css属性,而且还是CSS2的内容!

关于counter-reset、content-increment两个属性的详解可以参看张鑫旭的博文:《CSS计数器(序列数字字符自动递增)详解》,这里做个记录,写个demo


content-increment
  • 默认时的计数器:
    • 列表项
    • 列表项
    • 列表项
  • 修改计数器每次增加的值为2:
    • 列表项
    • 列表项
    • 列表项
  • 修改计数器每次增加的值为-1:
    • 列表项
    • 列表项
    • 列表项
  • 修改计数器以罗马字符显示:
    • 列表项
    • 列表项
    • 列表项
    计数器以嵌套计数显示:
  • 父级
  • 父级
    • 子级1
    • 子级2
    • 子级3
  • 父级
    • 子级1
    • 子级2
    • 子级3
  • 父级

兼容情况还不错:

css content之counter-reset、content-increment - Canrz