content计数器

最新推荐文章于 2022-03-01 09:31:58 发布

caimaomaocai

最新推荐文章于 2022-03-01 09:31:58 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/caimaomaocai/article/details/79838629

版权

注：本博客中大部分例子来自于张鑫旭的《css世界》, 已征得张老师本人同意

content计数功能非常强大，可以实现用js都不好实现的效果

content计数器有两个属性: counter-reset和counter-increment ，方法（counter()/counters()）

属性counter-reset:就是“计数器-重置”的意思，作用就是给这个计数器起个名字且告诉计数器从哪个数字开始计数，默认为0。

如：

.counter{
  counter-reset:xiaoming 2;
}/*xiaoming就是计数器的名字，2表示从2开始计数*/

开始值可以是正整数、小数或者负数。不过火狐不识别小数，会直接把小数忽略采用默认值0，谷歌则向下取整

counter-reset也可以多个计数器同时命名，中间只需空格！只需空格！！只需空格！！！切记不要加逗号

如：

.counter{
  counter-reset:xiaoming 2 xiaohong 3
}

属性值：counter-increment，就是‘计数器递增’的意思。值为counter-reset的1个或多个关键字，后面也可以跟数字，表示每次计数的变化值。如果忽略没写，则变化值默认为1

计数器有一套规则，我觉得张鑫旭大佬对这套规则的比喻特别容易让人理解。。我们把计数器规则称为“普照规则”，

具体来讲就是:普照源(counter-reset)唯一，每普照（counter-increment）一次，普照源就加一次计数值

通常我们在使用计数器的时候，都会使用counter-increment来实现递增比如下面的栗子

.counter{
  counter-reset:xiaohua 2
  conuter-increment:xiaohua
}
.counter:before{
content:counter(xiaohua)
}/*counter-reset的计数开始值为2,counter-increment没有设置值，采用默认值1，普照一次，所以输出的结果为2+1*/

计数器数组变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的值

如:

.counter{
			counter-reset:xiaohua 2;
			counter-increment:xiaohua;/*counter-reset的计数初始值为2，而counter-increment没有设置值，采用默认值1*/
		}
		.counter:before{
			content:counter(xiaohua);/*此处的输出值为2+1*/
		}
		.counter:after{
			content:counter(xiaohua);
			counter-increment:xiaohua;/*每遇到counter-increment数值就+1，也就是2+1+1*/
		}

所以输出的结果是34

下面来一个变化值是负数且有两个计数器名称的栗子

.counter{
			counter-reset:xiaohua 2 xiaoming 5;
			counter-increment:xiaohua 1 xiaoming -2;/*xiaohua的变化值是1，而xiaoming的变化值是-2,所以xiaohua的值是2+1,xiaoming的值是5-2*/
		}
		.counter:before{
			content:counter(xiaohua);/*此处输出2+1*/
		}
		.counter:after{
			content:counter(xiaoming);/*此处输出5-2*/
		}

所以输出的结果为33

方法：counter()/counters() 这是计数器方法，类似css3中的calc()计算。但是这个方法只单纯的用来显示计数，上面的例子中都有counter方法，用来输出结果

counter的语法：counter(name,style) 其中name代表计数器名称，也就是counter-reset设置的名称,style表示输出的字体样式，可以是英文字母，罗马文等

如:content:counter(xiaohua,lower-roman)

也可以不设置,默认为阿拉伯数字

下面介绍一下counters()方法，平时我们的序号不可能只是1,2,3,4，还可以是1.1、1.2、1.3等子序号，counters()就是用来输出子序号

基本语法：counters(name,string)

其中name代表计数器名称。也就是counter-set设置的名称

string则代表子序号的连接字符串，例如1.1的string就是‘.’,1-1就是'-'

下面引用张鑫旭老师的栗子

HTML部分

<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>

css部分

.reset { 

  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}

输出的结果: