计数器可以说是content的重点, 因为此功能非常强大, 实用, 并且不具有可替代性, 甚至可以实现连JavaScript都不好实现的效果.

所谓css计数器效果, 就是使用CSS代码实现随元素的数目增多, 数值也跟着变大的效果, 有点类似于<ol>, 但是比ol更灵活

CSS计数器有两个属性 (counter-reset 和 counter-increment) 和一个方法 (counter() / counters()), 下面以次讲解:

1. counter-reset

属性counter-reset顾名思义就是 计数器-重置 的意思, 其实主要作用就是给计数器起个名字, 如果可能, 顺便告诉下从哪个数字开始计数, 默认是0, 注意默认是0, 而不是1, 在网上可能会看到有很多例子默认显示的第一个数字都是1, 而不是0, 这是因为受到 counter-increment 的影响, 后面详细讲解

先看一个简单的例子

  1. <div>下面将出现的数字</div>
  2. <div class="counter"></div>
  1. .counter {
  2.     counter-reset: resetname 2;
  3.     font-size: 24px;
  4.     color: #f66;
  5. }
  6. .counter:before {
  7.     content: counter(resetname);
  8. }

如果将conter-reset 后面的2去掉, 那下面出现的数字就是 0

counter-reset 的计数重置可以是复数, 如 -2, 也可以是小数, 如 2.99, 不过, IE和FireFox对此都不认识, 认为是不合法的数值, 会当做0来处理, 在Chrome下, 任何小数都是向下取整, 如 2.99 会当成 2 来处理.

你以为到此为止了? 当然不是! counter-reset还有一手, 就是多个计数器同时命名, 列如:

  1.     .counter {
  2.         counter-reset: first 2 second 3;
  3.         font-size: 24px;
  4.         color: #f66;
  5.     }
  6.     .counter:before {
  7.         content: counter(first);
  8.     }
  9.     .counter:after {
  10.         content: counter(second);
  11.     }

效果如下

另外, counter-reset 还可以设置为 none, 和inherit, 取消重置以及继承重置.

2. counter-increment

属性 counter-increment 顾名思义就是 计数器递增的意思, 值为counter-reset的一个或者多个关键字, 后面可以跟数字, 表示每次计数的变化值, 如果省略则使用默认变化值 1

CSS计数器的技术有一套自己的规则, 我们称之为 "普照规则", 具体来讲就是, 普照源 (counter-reset) 唯一, 每普照(counter-increment)一次, 普照源增加一次计数

于是就能解决上面所说的 "默认值0"的问题了, 通常我们在使用计数器的时候, 都会使用counter-increment , 这个肯定要用, 不然怎么递增呢.

  1. .counter {
  2.     counter-reset: incerment 2;
  3.     counter-increment: incerment;
  4.     font-size: 24px;
  5.     color: #f66;
  6. }
  7. .counter:before {
  8.     content: counter(incerment);
  9. }

这个普照元素也可以写直接写到为元素上, 效果和上面一样, 也是递增1, 如果父元素和子元素都写了, 那么父元素递增一次, 子元素递增一次, 最后的结果就是递增两次

正如之前提到的, 这个变化值不一定都是1, 可以灵活设置, 比如

  1. counter-increment: incerment 2;

变化值也可以是负数, 比如

  1. .counter {
  2.     counter-reset: incerment 5;
  3.     counter-increment: incerment -2;
  4.     font-size: 24px;
  5.     color: #f66;
  6. }
  7. .counter:before {
  8.     content: counter(incerment);
  9. }

值也可以是none 和 inherit

3. counter()/counters()

这两个是方法, 不是属性, 类似于CSS3中的 calc(), 这里的作用就是显示计数, 不过名称和用法有多个

比如上面用到的 counter(name), 就是显示计数

还可以写成 counter(name, style)

那么这个style是什么呢, 它支持的关键字就是 list-style-type 所支持的那些, 它的作用就是我们的递增和递减不一定都是数字, 也可以使英文字母或者别的

list-style-type:

disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit

  1. .counter {
  2.     counter-reset: styleType 2;
  3.     font-size: 24px;
  4.     color: #f66;
  5. }
  6. .counter:before {
  7.     counter-increment: styleType;
  8.     content: counter(styleType, lower-roman);
  9. }

counter 还支持级联, 也就是说, 一个content 属性可以有多个 counter() 方法

  1. .counter {
  2.     counter-reset: cascaderOne 2 cascaderTwo 3;
  3.     font-size: 24px;
  4.     color: #f66;
  5. }
  6. .counter:before {
  7.     content: counter(cascaderOne) '\A' counter(cascaderTwo);
  8.     white-space: pre;
  9. }

下面介绍一下 counters() 方法, 看似只比counter多个 s , 但却有着不同的意思, counters 几乎可以说是嵌套计数器的代名词.

我们平时写的时候不可能都是1, 2, 3, ..., 还有比如 1.1, 1.2, 1.3...等类似的序号, 前者就是counter()干的事, 后者就是counters()干的事

counters的基本用法

  1. counters(name, string, style);

其中 string 参数是字符串, 需要用引号包含, 是必须参数, 表示子序号的连接符, style还是和counter的第二个参数一样

下面一个完整的demo:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>content</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul, li {
  12.             list-style: none;
  13.         }
  14.         .reset {
  15.             padding-left: 20px;
  16.             counter-reset: fe;
  17.         }
  18.         .counter:before {
  19.             content: counters(fe, '.') '. ';
  20.             counter-increment: fe;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="reset">
  26.     <div class="counter">前端开发FE
  27.         <div class="reset">
  28.             <div class="counter">前端开发FE111</div>
  29.             <div class="counter">前端开发FE222
  30.                 <div class="reset">
  31.                     <div class="counter">前端开发FEsss</div>
  32.                     <div class="counter">前端开发FE</div>
  33.                     <div class="counter">前端开发FE</div>
  34.                 </div>
  35.             </div>
  36.             <div class="counter">前端开发FE3333</div>
  37.         </div>
  38.     </div>
  39.     <div class="counter">后端开发</div>
  40.     <div class="counter">PM
  41.         <div class="reset">
  42.             <div class="counter">瞎提需求</div>
  43.         </div>
  44.     </div>
  45. </div>
  46. </body>
  47. </html>

效果如下

深入理解 content 计数器的更多相关文章

  1. 深入理解CSS计数器

    × 目录 [1]创建计数器 [2]使用计数器 [3]DEMO 前面的话 我们对计数器已经不陌生了,有序列表中的列表项标志就是计数器. 创建计数器 创建计数器的基础包括两个方面,一是能重置计数器的起点, ...

  2. 安卓开发_深入理解Content Provider

    一.Content Provider概述 Content Provider用于保存和获取数据,并使其对所有应用程序可见,这是不同应用程序之间共享数据的唯一方式,因为在Android中没有提供所有应用可 ...

  3. 《CSS世界》读书笔记（九）

    <!-- <CSS世界>张鑫旭著 --> content内容生成技术 1. content 辅助元素生成 清除浮动: .clear:after { content: ''; d ...

  4. CSS content内容生成技术以及应用（转）

    一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...

  5. 转载：css3 content 生成内容

    本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...

  6. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  7. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  8. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

  9. CSS 内容生成

    原文地址:http://www.zhangxinxu.com/wordpress/?p=739 一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在CSS2 ...

随机推荐

  1. 矩震级Mw与地震矩M0的换算关系

    矩震级实质上就是用地震矩来描述地震的大小.地震矩是震源的等效双力偶中的一个力偶的力偶矩,是继地震能量后的第二个关于震源定量的特征量,一个描述地震大小的绝对力学量,单位为N.m(牛.米),其表达式为: ...

  2. Problem A 还会用继承吗?

    定义一个Base类,包括1个int类型的属性,以及满足输出格式要求的构造函数.拷贝构造函数和析构函数. 定义Base类的子类Derived,包括1个int类型的属性, 以及满足输出格式要求的构造函数. ...

  3. JavaWeb：一个Servelt多个请求

    一个Servelt多个请求 基础模拟 方法一:使用switch方法  一.方法介绍 方法:switch 优点:方法简单,明了 缺点:维护麻烦,保密性不好 二.代码实现 1.servlet类 packa ...

  4. mysql创建用户并授予权限

    MySQL创建数据库与创建用户以及授权   1.create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创 ...

  5. [Mac]ssh免密登陆配置

    在已经有公钥和私钥的情况下,只需要以下三步即可实现免密登陆: 1.将已有rsa公钥和私钥拷贝到~/.ssh目录下. 2.编辑配置文件:vim ~/.ssh/config,内容如下: Host  xxx ...

  6. 线程简述（Thread)

    线程: 进程是一个正在运行的程序,例如电脑上现在在运行的qq,浏览器,电脑管家,这些都是进程 线程就是每一个进程中的一个执行单元,每一个进程至少一个线程,可以有多个线程,例如浏览器上每一个打开的网页都 ...

  7. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  8. 重启uwsgi脚本备份

    NAME="identifyImg_uwsgi.init" if [ ! -n "$NAME" ];then echo "no arguments&q ...

  9. SQL注入之Sqli-labs系列第二关

    废话不在多说  let's go!   继续挑战第二关(Error Based- Intiger) 同样的前奏,就不截图了 ,and 1=1和and 1=2进行测试,出现报错 还原sql语句 查看源代 ...

  10. 搭建使用create-react-native-app 搭建app开发环境

    文档地址 react-native expo 官网 expo 文档 两种创建react-natvie-app的方法 react-native init projectName create-react ...