css中的counter计数器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中的counter计数器相关的知识,希望对你有一定的参考价值。
作为程序猿,代码比什么都有说服力,嗯,所以废话不多说,直接看吧,认真看完了,就一定有收获(内容有点多,需要一点耐心哦,我是一点一点写的,咱也一点一点看呗)
counter:是css计数器,只能跟content属性在一起使用的时候才起作用,而content属性专用在before/after伪元素上
counter计数器的属性和方法
属性有:counter-reset、counter-increment
方法有:counter、counters
counter-reset:可以理解为“计数器-重置”的意思,有两个参数:name(必选参数)/ start(可选参数,默认值为0)。主要作用就是给计数器起名字,顺便告诉从哪个数字开始计数。
OK, 这里,我们先看个简单的counter-reset的例子:
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;
pfont-size:20px;counter-reset:count 4;
p:after
content:counter(count);
</style>
<div class="box">
<p>3的后面是</p>
</div>
counter-reset的计数重置可以是负数,例如-2。也可以写成小数,例如2.99当成2处理,不过就是IE和FireFox都不识别,认为是不合法数值,直接无视,当作默认值0来处理;Chrome,任何小数都是向下取整。
counter-reset,可以给多个计数器同时命名。中间直接用空格分开,其它的都不可以
嗯、看例子呗
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;
pcounter-reset:count 1 count1 4;display:inline-block;
p:after
content:counter(count);
span:beforecontent:counter(count1);
</style>
<div class="box">
<p>13的后面是</p>
<span></span>
</div>
另外,counter-reset还可以设置为none和inherit. 干掉重置以及继承重置。
2. counter-increment:就是“计数器-递增”的意思,值为counter-reset的1个或多个name。后面可以跟随数字,表示每次计数的变化值。如果不写,则使用默认变化值1
css计数器的计数是有一套规则的,具体来说就是:counter-reset唯一,每counter-increment一次,counter-reset增加一次计数。
下面我们来看一下例子理解一些
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;
pfont-size:20px;counter-reset:count 3; counter-increment:count;
p:after
content:counter(count);
</style>
<div class="box">
<p>3的后面是</p>
</div>
这里counter-increment在p标签中,counter-reset值增加,默认递增1,于是计数从设置的初始值3变成了4,count就是这里的计数器,自然伪元素content值counter(count)就是4
② 当然,也可以普照自身,也就是counter-increment直接设置在伪元素上:
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;
pfont-size:20px;counter-reset:count 3;
p:after
content:counter(count);counter-increment:count;
</style>
<div class="box">
<p>3的后面是</p>
</div>
依然是使用一次counter-increment全局的计数器+1,所以,显示的数值还是4,效果与上面的一样。
③ 如果父元素和子元素都设置counter-increment,结果会如何呢?看下面的例子
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;
pfont-size:20px;counter-reset:count 2;counter-increment:count;
p:after
content:counter(count);counter-increment:count;
</style>
<div class="box">
<p>3的后面是</p>
</div>
很简单的,父元素增加1,子元素也增加1,counter-reset
设置的计数器值增加2次,计数起始值是2,于是现实的数字就是4
啦!
总而言之,无论位置在何方,只要有counter-increment,对应的计数器的值就会变化,counter()只是输出而已!
counter-increment其他设定
① counter-reset可以一次命名两个计数器名称,counter-increment自然有与之呼应的设定,也是名称留空就可以了。
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;
pcounter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1
p:after
content:counter(count);
span:beforecontent:counter(count1);
</style>
<div class="box">
<p>33的后面是</p>
<span></span>
</div>
counter-increment:每次增加的数字默认是1,当然我们也可以自己设置增加的数字是什么,就像上面的例子,可以把增加值设置为2
还可以是负数,例如:
counter-increment: counter -1
就有了递减排序效果啦!
③ counter-increment值还可以是none或者inherit
3. counter()/counters()
这是个方法,作用很单纯显示计数。不过名称、用法有多个:
① 目前为止,从上面的例子中我们用的比较多的就是下面的这种了
counter(name) /* name就是counter-reset的名称 */
② 那下面这个语法是什么意思呢?
counter(name, style)
这里的style参数还有有些名堂的。其支持的关键字值就是list-style-type支持的那些值。作用是,我们递增递减可以不一定是数字,还可以是英文字母,或者罗马文等。
list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
看个例子呗
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;
pcounter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1
p:after
content:counter(count);
span:beforecontent:counter(count1,lower-roman) ;
</style>
<div class="box">
<p>33的后面是</p>
<span></span>
</div>
③ counter还支持级联。也就是一个content属性值可以有多个counter()方法
<style>
.boxwidth:300px; height:200px; background:#000; color:#fff; padding:30px;font-size:20px;
pcounter-reset:count 1 count1 3;display:inline-block;counter-increment:count 2 count1
p:after
content:counter(count) counter(count1);
</style>
<div class="box">
<p>33的后面是</p>
<span></span>
</div>
④ 下面介绍counters()方法。看似值多了个字母s, 但表意大变身。counters几乎可以说是嵌套计数的代名词。
基本用法为:
counters(name, string);
其中,string参数为字符串(需要引号包围的)(必须参数),表示子序号的连接字符串。例如的1.1的string参数就.,1-1的string参数就是‘-’..
嗯、直接看例子喽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
lilist-style:none;
.father padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666;
.son:before content: counters(count, -) . ; counter-increment: count; font-family: arial black;
</style>
</head>
<body>
<ul class="father">
<li class="son">我的爱好
<ul class="father">
<li class="son">爬山</li>
<li class="son">追剧</li>
<li class="son">旅游</li>
</ul>
</li>
<li class="son">我的偶像
<ul class="father">
<li class="son">王昱珩
<ul class="father">
<li class="son">最强大脑第二季选手</li>
<li class="son">最强大脑第五季水之队队长</li>
</ul>
</li>
<li class="son">胡歌</li>
<li class="son">陈默</li>
</ul>
</li>
<li class="son">web前端</li>
<li class="son">啦啦啦啦啦</li>
</ul>
</body>
</html>
如下图所示
是不是很奇妙,就出现了上面的效果
⑤counters()也是支持style自定义递增形式的。
counters(name, string, style)
与counter()的style参数使用一致,不赘述。
注意:
一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。
学完了,让我们一起来看看一些有意思的小实例吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>counter小实例</title>
<style>
#boxwidth:300px; height:300px; background:greenyellow; padding:30px; margin:100px auto;
counter-reset:count;
lablemargin-left:20px;
.checkcounter-increment:count;
.count:aftercolor:red; font-size:20px; content:counter(count);
</style>
</head>
<body>
<div id="box">
<p>选出你喜欢的他或她</p>
<input type="checkbox" /><lable>胡歌</lable><br/>
<input type="checkbox" /><lable>王昱珩</lable><br/>
<input type="checkbox" /><lable>鲍云</lable><br/>
<input type="checkbox" /><lable>梁紫晨</lable><br/>
<input type="checkbox" /><lable>陈默</lable><br/>
<input type="checkbox" /><lable>唐嫣</lable><br/>
<input type="checkbox" /><lable>杨幂</lable><br/>
<span class="count">你总共选择了</span><span>位</span>
</div>
<script>
var aIpt = document.getElementsByTagName(input);
var len = aIpt.length;
for(var i=0;i<len;i++)
aIpt[i].index = i;
aIpt[i].onclick = function()
if(this.checked)
this.className=check;
else
this.className=;
</script>
</body>
</html>
上面的是效果图,下面的总数会随着你选择的人数而不断变化,是不是很简单啦
由于计数器是伪元素控制显示的。因此,我们几乎可以应用各种CSS样式,各种定位等。所以,基本上,只要有有序序号呈现的地方,就能使用CSS计数器。
嗯、分享结束,内容有点长,主要是想要一次把这些知识搞清楚,有耐心的看完了,一定会有所收获的。
以上是关于css中的counter计数器的主要内容,如果未能解决你的问题,请参考以下文章
[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示