特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul
和ol
元素。如果要使用在div
这样的元素上,只能通过list-style-image
或者是元素的backgroud-image
来实现。在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after
、:before
或者伪元素::after
、::before
给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type
)。更神奇的是,可以给这些计数器设置独特样式,让其在外观上更靓丽。如下图所示:
这种技术令人有点困惑,因为他看起来不同于其他CSS属性,需要同时使用多个CSS属性。接下来与大家一起探讨如何使用这几个属性。
CSS Counters用到的属性
前面也提到过,使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:
-
**counter-reset**
:此值是必需的。必须用于选择器,主要用来标识该作用域,其值可以自定义。 -
**counter-increment**
:用来标识计数器与实际相关联的范围。 -
**content**
:用来生成内容,其为:before
、:after
或::before
、::after
的一个属性。在生成计数器内容,主要配合counter()
一起使用。 -
**counter()**
:该函数用来设置插入计数器的值。 -
**:before**、**:after**或**::before**、**::after**
:配合content
用来生成计数器内容。
要想完全了解或者熟练使用好CSS Counters来创建计数器,就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。
counter-reset
语法规则
counter-reset:[ <identifier> <integer>? ]+ | none | inherit
取值说明
counter-reset
的默认值为none
,其主要取值包括两个部分:
-
**identifier**
:用来定义计数器的名称,这个名称可以自定义,如:item
。而且后面可以紧跟一个整数值,中间用空格分隔开来,如headings 0
; -
**integer**
:此值用来设置调用计算数器时起始值,默认值为0
。
功能描述
counter-reset
主要功能用来标识计数器作用域,而且此值必须用在选择器上,必且是不能缺少的。共包括两个部分,第一个部分是自定义计数器名称,这一部分是必需的。第二部分是计数器起始值,此值是可选的。默认值为0
。此值告诉标识组起始值是什么,所以说这个值非常有价值。因为,如果你设置的值为0
,那么计数从1
开始;如果你设置的值是-5
,那么计数从-4
开始。依此类推。
counter-reset
自定义计数器名称时可以随意取名,但此名不能是CSS的关键词,比如none
、inherit
之类。
counter-reset
属性可以包含一个或者多个计数器标识符,每个后面都可以跟一个整数值,如section 0 heading 0
。如果元素都重置,并且增加一个计数器,计数器是第一次重置,后面值就会递增。如果不止一次指定同一个计算器,则将按指定的计数器做递增。
这里看上去难以理解,我们来看一个示例,对比其效果:
<div class="section">section1</div>
<div class="section">section2&
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-counters.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!