使用css counter,给元素实现自动计数编号

下面两个demo,分别是ul li 和 div 元素
  • counter,设置的变量是 example1, 初始值是3
  • 在li的before中,每次递增的是2
  • 在li的before伪元素content属性中,调用 counter 函数,
  • 因为调用过后,变量example1的值就会改变,所以第一个li的 编号就是初始值+递增值。即5

counter作用于任何元素

p1

p2

p3

p4

这个demo,与前面的区别是counter函数调用不同,前者是 counter(), 这个是 counters()
  • 层级目录
    • counters这个函数,它的参数是(name, string, ?style)
    • name 即 counter变量名
    • string 是多个编号之间的连接符号,这个demo中,是 .
    • style, 是可选项,为计数器的样式,可以是数字、字母、符号等,如省略,则默认是十进制
  • b
  • c
    • m
    • n
      • q
      • w
      • e
      • r
  • d
contenteditable="true"