CSS计数器(自定义列表)

概念

CSS3计数器(CSS Counters)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能(自定义有序列表)

与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化计数

使用计数器步骤

  1. 定义计数器
  2. 设置计数器的增数规则
  3. 自定义列表样式
  4. 调用计数器

计数器属性

  • counter-reset:定义计数器,包括初始值、作用域等
  • counter-increment:设置计数器的增数规则(一般都是用默认,即值只设置了计数器名称,未设置增数规则)
  • counter()/counters():在content属性中使用,用来调用计数器
  • @counter-style:自定义列表样式

counter-reset语法

counter-reset:[<identifier><integer>?]+|none|inherit

用来定义计数器的名称、初始值和作用域,默认值为none

<identifier>:计数器名称

<integer>:计数器的初始值,可以不写,默认为0

注意:当元素display为none时,该属性失效

counter-increment语法

counter-increment:[<user-ident><integer>?]+|none

用来设置计数器的增数规则,默认值为none(阻止计数器增加)

<user-ident>:需要增数的计数器名称

<integer>:计数器增数的值,可以为负值,默认是1

我们可以同时设置多个计数器增数规则

注意:当元素display为none时,该属性失效

counter()语法

content:[<counter>]+

<counter>=counter(name)| 直接调用计数器名称 可得到1,2,3

                    counter(name,list-style-type)| 调用计数器名称,并指定计数器列表样式

counters()语法

content:[<counter>]+

<counter>=counters(name,string)| 嵌套计数器时,设置间隔的字符串 可得到1.1,1.2,1.3

                    counters(name,string,list-style-type) 嵌套计数器时,设置间隔字符串并指定样式

注意:使用计数器,需要结合:before和:after使用。可以同时使用多个计数器

@counter-style语法

@counter-style counterStyleName{

         system:算法

         range:使用范围

         symbols/ additive-symbols:符号

         prefix:前缀

         suffix:后缀

         pad:补零

         negative:负数策略

         fallback:出错后的默认值

         speakas:语音策略

}

计数器demo

posted @ 2018-01-21 17:32  小白知浅  阅读(267)  评论(0编辑  收藏  举报