CSS的计数器:counter-increment与counter-reset
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
。如果元素都重置,并且增加一个计数器,计数器是第一次重置,后面值就会递增。如果不止一次指定同一个计算器,则将按指定的计数器做递增。
counter-increment
语法规则
counter-increment:[ <identifier> <integer>? ] | none | inherit
取值说明
默认值为
none
。其值也包括两个部分:
**identifier**
:计数器名称,就调用
counter-reset
声明的计数器的标识符。
**integer**
:一个整数值,指定计数起始值。其值允许是0或者负整数值,如果未指定任何值,则该值为1(前提是
counter-reset
未显式设置计数的起始值)。其值递增是按倍数值递增,如果设置了值为2,后面元素递增值为4、6、8,依此类推。
功能描述
counter-increment
属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的,获取
counter-reset
定义的标识符。
counter-ncrement
第二个值是一个可选值,是一个整数值,可以是正整数,也可以是负整数。主要用来预设递增的值,如果取值为负值时,表示递减。默认值为
1
。
content
content
是和伪类
:before
、
:after
或者伪元素
::before
、
::after
配合在一起使用,主要功能用来生成内容。有关于
content
详细介绍,此处不做过多阐述,感兴趣的同学可以阅读 Divya Manian写的《 CSS Generated Content Techniques》一文。
在本文中所涉及到的内容,
content
属性主要与
counter([])
配合使用,用来生成计数器值,如:
h2{
counter-increment: section;
&:before{
content:"Chapter" counter(Chapter) "." counter(section);
}
}
counter()
counter()
是一个函数,其主要配合
content
一起使用。使用
counter()
来调用定义好的计数器标识符。
counter()
函数接受两个参数,而且两参数之间使用逗号(
,
)来分隔。第一个参数是
counter-increment
定义的属性值 ,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格,有点类似于
list-style-type
。默认情况之下取值为十制,但你也可以重置这个样式风格,比如
upper-roman
或者
upper-alpha
等。
counter()
函数第二个值与列表中的
list-style-type
值相等:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- upper-alpha
- none
- inherit
同样的,可以使用多个
counter()
,如:
content: counter(Chapter,upper-roman) "-" counter(section,upper-roman);
。
注:定义reset要在元素之前定义,部分安桌机设置默认值无效!!!
在线案例1
在线案例2
转载请注明:前端录»CSS的计数器:counter-increment与counter-reset
<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=3-297-2"></script>
CSS的计数器:counter-increment与counter-reset相关推荐
- css样式计数器,详细介绍CSS计数器
css计数器效果是指使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于 , 但是比ol更灵活. (推荐教程:css视频教程) CSS计数器有两个属性 (counter-reset ...
- css使用计数器自动标序号,counter()和counters()的区别及具体用法
说明:通过css计数器,我们可以只用一个简单的变量,来实现多个列表嵌套的排序输出. 原理:通过css计数器的自加功能实现编号的目的. 用到的属性: content-使用 ::before 和 ::af ...
- swift 学习- 12 -- 方法
// 方法 是与某些特定类型相关的函数. 类, 结构体,枚举 都可以定义实例方法, 实例方法为给类型的实例封装了具体的任务与功能. 类, 结构体, 枚举 也可以定义类型方法, 类型方法与类型本身 ...
- Swift中文教程(十一) 方法
方法是关联到一个特定类型的函数.类.结构.枚举所有可以定义实例方法,封装特定任务和功能处理给定类型的一个实例.类.结构.枚举类型还可以定义方法,相关的类型本身.类型方法类似于objective – c ...
- Swift5.1 语言指南(十三) 方法
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
- JavaScript 的闭包用于什么场景
本文翻译自 MDN ( Mozilla Developer Network ): 原文地址:MDN 译文地址:shixinzhang 的博客 读完本文你将了解到: 词法作用域 闭包 闭包实战场景之回调 ...
- javascript功能_功能性JavaScript简介
javascript功能 Hey everybody! I've written a book called Discover Functional JavaScript, and it's now ...
- 面向对象的JavaScript-009-闭包
引自:https://developer.mozilla.org/cn/docs/Web/JavaScript/Closures 闭包是指能够访问自由变量的函数 (变量在本地使用,但在闭包中定义).换 ...
- sql语句中的in用法示例_PHP中的循环语句和示例
sql语句中的in用法示例 循环 (Loops) Imagine that we need a program that says "hello world" 100 times. ...
最新文章
- photofunia
- 链表问题9——复制含有随机指针节点的链表(进阶)
- 在Linux和Windows操作系统中socket program的兼容问题
- golang 文件操作
- 【深度学习入门到精通系列】Deep Q Network
- python编程有用吗-分享8点超级有用的Python编程建议
- 用ABAP来实现柱状图和饼状图的输出
- Android 应用内启动第三方应用
- Eclipse运行项目报Could not find *.apk!解决办法
- java barrier_Java并发类CyclicBarrier方法详解
- mysql增加sort_buffer_设置sort_buffer_size
- python对excel数据求和_96、python操作excel求和
- 【Python基础入门系列】第03天:Python 变量与数据类型
- VMware vSphere之vCenter安装
- mysqli 语句和mysql语句一样吗_如何为动态sql语句准备mysqli语句
- For web.config setting,reference the book of
- docker commit新镜像之后删除旧镜像
- 优先经验回放(Prioritized Experience Replay)
- android 仿微信demo————微信消息界面实现(移动端)
- poj 1655 Balancing Act 树状dp