很早之前,计数器仅存在于ul,ol等元素中,如何想给其他元素增加计数,就只能通过list-style-image,或者background-image来实现。不过现在css3增加了counter属性,可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。

首先, counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上,它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:

 counter-reset: count 0  /*标识计数器count从1开始*/

 counter-reset: count2 2 /*标识计数器count2 从3开始*/

 counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/

  

counter-increment 表明计数器实际用到的范围 。他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如:

counter-increment: count 1 /*表明每次递增 1*/

counter-increment:count 2 /*表明每次递增 2*/

  

最后一个,content和counter搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。

整体例子如下:

<dl>
<dt>example</dt>
<dd>example</dd>
<dd>example</dd>
<dd>example</dd>
<dt>example2</dt>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
</dl>

  

dl { counter-reset:test1 0;}
dt { counter-increment: test1; counter-reset: test2 0;}
dt:before{ content:counter(test1)"、";}
dd{ counter-increment:test2;}
dd:before{
content:counter(test1)"-"counter(test2)"、";
}

  效果图如下:

css3的counter的用法的更多相关文章

  1. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  2. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  3. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  4. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  5. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  6. css3中webkit-box的用法(平分父元素)

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...

  7. css3 box-shadow 阴影的用法

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  8. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  9. CSS3——:nth-child选择器基本用法简述

    注:n 是从1开始的 :nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法 下面示例代码截图用的是同一个例子,p元素的父元素都是body   p ...

随机推荐

  1. Java分享笔记:RandomAccessFile流 & 在文件指定位置插入内容

    RandomAccessFile流:随机存取文件流,该类定义了一个记录指针,通过移动指针可以访问文件的任意位置,且对文件既可以读也可以写.使用该类的write方法对文件写入时,实际上是一种覆盖效果,即 ...

  2. ABAP术语-Call Transaction

    Call Transaction 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/15/1039270.html A data transfe ...

  3. 19-2-28Python的了解以及变量、常量、数据类型、if语句的结构

    Python目前有两个大版本,一个是2.x版本,一个是3.x版本. Python2x:源码冗余,混乱:且默认ASCII码,只能识别英文字母数字. Python3x:源码整合,美观,清晰,简单.默认ut ...

  4. thinkphp 下多图ajax上传图片

    碰到一个项目,有一个比较繁琐的功能6个ajax上传,基本上每个上传逻辑多不一样,记录一下 thinkphp的view页面: id方便找到这个元素 name一定要加 [ ] <div class= ...

  5. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  6. Linux上面安装redis和简单使用

    一.安装,redis的官方的网址   https://redis.io/ 目前的最高的版本是4.0,我安装的是2.*的版本 1.下载源码,解压后编译源码. $ wget http://download ...

  7. python基础小知识,is和==的区别,编码和解码

    1.is和==的区别 1)id() 通过id()我们可以查看到一个变量表示的值在内存中的地址 >>> s1 = "Tanxu" >>> s2 = ...

  8. MongoDB修改数据库名,collection名

    利用dropDatabase,copyDatabase修改Database名称 db.copyDatabase('old_name', 'new_name'); use old_name db.dro ...

  9. jenkins邮件发送jmeter接口测试报告

    在Jenkins中配置实现邮件通知,Jenkins提供了两种方式的配置. 一种是Jenkins内置默认的邮件通知,但是它本身有很多局限性,比如它的邮件通知无法提供详细的邮件内容.无法定义发送邮件的格式 ...

  10. 解决 Python2 和 Python3 的共存问题

    首先安装两种版本的Python 进入系统属性更改环境变量 将两个版本的安装路径找出. 添加至PATH中,变量之间用分号隔开. D:\Python36\Scripts\;D:\Python36\;D:\ ...