CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ulol元素。如果要使用在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的关键词,比如noneinherit之类。

counter-reset属性可以包含一个或者多个计数器标识符,每个后面都可以跟一个整数值,如section 0 heading 0。如果元素都重置,并且增加一个计数器,计数器是第一次重置,后面值就会递增。如果不止一次指定同一个计算器,则将按指定的计数器做递增。

这里看上去难以理解,我们来看一个示例,对比其效果:

<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">section3</div>
<div class="section">section4</div>
<div class="section">section5</div>
<h3>header1</h3>
<h3>header2</h3>
<h3>header3</h3>
<h3>header4</h3>
body{
counter-reset: section 0 heading 0;
}
div{
counter-increment: section;
margin: 5px;
cursor: pointer;
background: orange; &:before{
content: counter(section) '.';
display:inline-block;
width: 20px;
height:20px;
text-align: center;
line-height: 20px;
background:green;
color:#fff;
margin-right:10px;
transition: all .28s ease;
} &:hover {
&:before{
transform: translateX(10px); }
}
}
h3{
counter-increment: heading;
margin: 5px;
cursor: pointer;
background: #f36;
border-radius: 30px; &:before{
content: counter(heading) '.';
display:inline-block;
width: 20px;
height:20px;
text-align: center;
line-height: 20px;
background:green;
border-radius:100%;
color:#fff;
margin-right:10px;
transition: all .28s ease;
} &:hover {
&:before{
transform: translateX(10px);
}
}
}

body中定义了计数器标识符counter-reset: section 0 heading 0;,而在div中使用了标识符sectioncounter-increment: section;,而在h3中使用标识符counter-increment: heading;divh3都会按各自对应的标识符设置的起始值做递增计算。如下图所示:

在线案例

稍作修改,在h3上使用标识符section,这个时候,h3会在前面使用section标识符的div上做递增。

h3{
counter-increment: section;
... &:before{
content: counter(section) '.';
...
}
}

如下图所示:

在线案例

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([<identifier>])配合使用,用来生成计数器值,如:

h2{
counter-increment: section; &:before{
content:"Chapter" counter(Chapter) "." counter(section);
}
}

counter()

counter()是一个函数,其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。

counter()函数接受两个参数,而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment定义的属性值<identifier>,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格,有点类似于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);

创建计数器

前面内容主要介绍了CSS Counters创建计数器用到的属性,以及这些属性的相关使用方法。接下来,一起来看如何创建和设置计数器。

例如我们有这样的一个结构

<dl>
<dt>term</dt>
<dd>definition</dd>
<dt>term</dt>
<dd>definition</dd>
<dt>term</dt>
<dd>definition</dd>
</dl>

默认看到的效果是这样子:

在线案例

显然这不是我们想要的效果,希望在dt前面有数字标识符,比如说1、2、3等等。通过以前的方法除了使用图片是没有别的比较好的方案了。那么利用今天所介绍的counter就好处理了。

第一步:设置计数器

要使用CSS Counters生成自动计数器,首要条件就是通过counter-reset属性先声明一个计数器名称,这个名称是什么名字并不重要,重要的是你声明了这样的一个名。如:

dl {
counter-reset: term;
}

第二步:声明计数器

counter-reset只是定义了一个计数器标识符,在实际使用中,需要通过counter-increment属性来指定计数器作用域。针对这个示例来说,counter-reset只是定义了一个计数器标识符,但没有指定用到哪。换句话说,这个计数器标识符,可以用到任何标签元素上。

在这个示例中,如果要使用dt标签上使用counter-reset声明好的计数器,需要使用counter-increment来显式设置:

dl {
counter-reset: term; dt{
counter-increment: term;
}
}

第三步:显示计数器

上面两步下来,不见任何成效。如果要让dt标签前面生成自己需要看到的计数器,还需要通过:beforecontentcounter()

dl {
counter-reset: term; dt{
counter-increment: term; &:before{
content: counter(term) ":";
margin-right:5px;
}
}
}

这个时候你就能看到效果了:

在线案例

这是比较常见的一种效果。除了这种效果之外,还可以将多个计数器组合起来使用。在上例基础上,来对dd做计数器处理。

dl {
counter-reset: term; dt{
counter-increment: term;
counter-reset: definition; &:before{
content: counter(term) ":";
margin-right:5px;
}
}
dd {
counter-increment: definition;
&:before{
content:counter(term) "-" counter(definition) ":";
margin-right:5px;
}
}
}

效果如下:

在线案例

除此之外,还可以借助counter-resetcounter-increment的初始值,做更多的处理。同样上面的一个示例,只是将counter-reset值从termdefinition换成别的值,比如说term 5definition -5:

dl {
counter-reset: term 5; dt{
counter-increment: term;
counter-reset: definition -5; &:before{
content: counter(term) ":";
margin-right:5px;
}
}
dd {
counter-increment: definition;
&:before{
content:counter(term) "-" counter(definition) ":";
margin-right:5px;
}
}
}

一切变化尽在不言中,看图吧:

在线案例

同样,在counter-increment中也可以设置整数值:

dl {
counter-reset: term 5; dt{
counter-increment: term 2;
counter-reset: definition 5; &:before{
content: counter(term) ":";
margin-right:5px;
}
}
dd {
counter-increment: definition -2;
&:before{
content:counter(term) "-" counter(definition) ":";
margin-right:5px;
}
}
}

在线案例

如果你想改变计数器样式,还可以像list-style-type一样使用:

dl {
counter-reset: term; dt{
counter-increment: term;
counter-reset: definition; &:before{
content: counter(term,upper-roman) ":";
margin-right:5px;
}
}
dd {
counter-increment: definition;
&:before{
content:counter(term,upper-roman) "-" counter(definition,upper-roman) ":";
margin-right:5px;
}
}
}

效果如下:

在线案例

除此之外,这个样做的一个好处是,可以给计数器定义不同的样式风格,甚至还可以加一些特效。比如文章开头提供的那个示例效果

扩展阅读

总结

CSS Counters主要是用来创建自动计数器的。往往依赖列表实现个性化的项目符号效果总是痛苦不堪的。那么使用counter-resetcounter-incrementcounter()配合伪类:before:after以及content会让你变得轻松很多。那么这篇文章主要介绍了如何使用CSS Counters相关属性实现非列表元素创建计数器效果,而且还很个性化。希望在这篇文章大家能喜欢,如果您有更好的使用经验,希望与大家一起分享。

CSS Counters 计数属性的更多相关文章

  1. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  2. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  3. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  8. CSS背景特殊属性值

    CSS代码示例-背景附着属性(background-attachment)-[背景图固定不动,不跟随滚动条滚动]:<html><head><title>背景附着属性 ...

  9. 怎样通过css的media属性,适配不同分辨率的终端设备?

    怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...

随机推荐

  1. ubuntu硬盘安装卡在探测文件系统

    在硬盘安装ubuntu的时候,会出现这样的问题:安装程序一直卡在正在探测文件系统就不动了.解决的方法很简单.在安装之前要在终端输入sudo空格umount空格 -l空格 /isodevice 不能少一 ...

  2. HDOJ 1856

    #include<cstdio> #include<cstdlib> typedef struct ufse *ufset; struct ufse { ]; ]; }UFS; ...

  3. django-cms 代码研究(二)bugs?

    djangocms集成到现有项目中后,发现了几个问题: 1. 现有项目的url匹配失效,下面requests请求被交给djangocms处理了 url(r'^admin/', include(admi ...

  4. ZJOI 游记

    在备战YZ提前招生考时去ZJOI玩了趟,ZJ果然人才辈出= =神犇讲课各种神听不懂啊orz day 0 Mon. 上午在AB班愉快地玩耍,下午就去HZ了. HZ真热啊... 学军也是节约= =空调都不 ...

  5. Redis学习手册(Sorted-Sets数据类型)

    一.概述: Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数(score ...

  6. [MAC] Mac OS X下快速复制文件路径的方法

    在windows上复制当前目录的路径有一个特别方便的方式,只需要用鼠标点击路径栏,它就会自动变成像”D:\Downloads\tmp”这样的路径,如果要复制文件路径,只需要将目录路径和文件名拼接起来即 ...

  7. Java虚拟机支持的最大内存限制

    最近在开发Java的程序.本来我是一直很喜欢Java的内存管理的,不需要担心分配内存,只管分配,垃圾收集器自己会给你回收内存的.现在开发的程序数据量很大,为了速度快,我准备把所有的信息加载进内存,这样 ...

  8. GCD的基本使用

    // // ViewController.m // gcd队列与函数 // // Created by 诠释 on 15/9/3. // Copyright (c) 2015年 诠释. All rig ...

  9. Ubuntu could not write bytes broken pipe

    一.环境变量问题 1 到登录界面的时候,进入命令行模式: alt+ctrl+F1 2 登录 3 修改环境变量(当我输入ls的时候  竟然没有找到命令,然后果断的知道是环境变量的事情,于是改之!) 4 ...

  10. 如何在postgresql中模拟oracle的dual表,来测试数据库最基本的连接功能?

    还好,网上弄到的,,没有dual的数据库,可以试图用select函数不带from数据表的方式来实现返回值. 一段测试代码: try: conn = psycopg2.connect(database= ...