很早之前,计数器仅存在于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初学者的学习路线建议

    一位资深程序员大牛给予Java初学者的学习路线建议 持续学习!

  2. struts2入门第一天----------一个简单例

    搭建完环境后就可以动手去打代码了.首先创建一个简单的提交表单的jsp页面(html页面也可以), <%@ page language="java" import=" ...

  3. cefsharp作为采集工具(学习笔记)

    cefsharp(webkit内核)浏览器替代webbrowser用来采集页面数据. 需要在页面form加载完毕,用异步方式自动获取sourcecode. 由于国内cefsharp的资料相对比较少,在 ...

  4. jsp传参 servlet接收中文乱码问题

    在公司实习了8个月,一直都是做android和h5的,但是发现做程序连一点服务都不会该怎么办,所以最近开始学起了java,不知道是不是因为框架学多了,现在看起springmvc框架比以前看起来简单太多 ...

  5. ThinkPHP之__construct()和__initialize()

    ThinkPHP中的__initialize()和类的构造函数__construct()网上有很多关于__initialize()的说法和用法,总感觉不对头,所以自己测试了一下.将结果和大家分享.不对 ...

  6. laravel -- 路由

    基本路由 Route::get('/get',function (){ return "this is get"; }); Route::post('/post',function ...

  7. VGA 时序标准

    VGA 显示器扫描方式从屏幕左上角一点开始,从左像右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT 对电子束进行消隐,每行结束时,用行同步信号进行同步:当扫描完所有的行 ...

  8. python基础之try异常处理、socket套接字基础part1

    异常处理 错误 程序里的错误一般分为两种: 1.语法错误,这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正 2.逻辑错误,人为造成的错误,如数据类型错误.调用方法错误等,这些解 ...

  9. PHP.39-扩展-锁机制解决并发-MySQL锁、PHP文件锁

    锁机制适用于高并发场景:高并发订单.秒杀…… apache压力测试 Mysql锁详解 语法 加锁:LOCK TABLE 表名1 READ|WRITE, 表名2 READ|WRITE ......... ...

  10. springmvc 处理put,delete请求

    前言:ajax用post编辑,删除提示越权操作状态为500,修改半晌最后大神指点说是:type修改为post和delete模式 最后还是一知半解,但是程序却正常使用了.当然注意我用的mvc,contr ...