考古发现[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解与实例演示

一律、挖坟不可耻

CSS计数器不是什么独特玩意儿了,早于10年春暖花开的时节,我勾勒的“CSS
content内容变更技术及采取”一轻柔就设提到(见下图),不过当下凡是当做其中同样各项介绍。就像例行之溜新同事平,虽然黑而焦炭的自身当自我介绍的早晚给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是内同样各类。很当然,个将月下,我虽会受无情的遗忘,除了那依稀的脸部,因为毕竟长得还算是比较泛。
考古发现 1

但,CSS计数器的斗量显然不是短暂几词介绍能够显露的,所谓人不可貌相。就如自己,说不定某年某月,当年像驴子一样为溜的初同事终于脑袋被派夹了,想起了本人之音容笑貌,找我来谋求帮助吗!

本人近年尽管遇到这样的动静。

深受部门同事做点果汁系统的时,由于果汁店经常会面发生水果因果品爆发于N多靓妹相遭遇假如缺货,因此,每人可以择三种植自由搭配的饮料。于是,就发了第1选项、第2选项、第3选项……
考古发现 2

理所当然我是纯文字勾勒以标签里之。好更好烦,感觉不会见又好了!此时,突然前面一块白光,午休时间为止,阿姨将办公室的灯打开了。这恍如隔世的念闪让我豁然想起了当年大明湖畔的“CSS计数器”。想当年,移动web还是草莽,IE六七兴风作浪。这诱人的技巧便昭告于天下也是受制于兼容大条件一旦腰斩之指令。

但今匪一样了,我们相见了一个双重好之时:英语老师从事传统工业生产锤子,影视大腕舍身取义集体前去监狱拍摄大片;以前那些受制于IE6/IE7不兼容而不见天日的高等级CSS/JS特性也混乱走及了台前,CSS计数器就是里面同样员。于是,我将起自我平常钓鱼挖蚯蚓的微锹去开掘CSS计数器的坟。虽然眼前网上一度出局部介绍CSS计数器的稿子,但差不多不足够健全,案例不足够帅,查阅也非便宜。就比如是租售的房舍,虽然也克挡风遮雨,但装修风格不是团结之,还依托人篱下,保不准房东借个东风就拿自吹走了。所以什么,有必要自己留一手,去开个坟然后修建个作坊。

对纯洁的技能圈而言,挖坟并无难听。我们重新去打过去的那些文章知识,好像一个考古学家去挖掘尘封的历史、消失的文明礼貌一般,是项大有价的工作。所以,如果大家对发掘考古感兴趣,就与自身一起去开挖挖~~

考古发现 3

其次、CSS计数器三角关系掏挖挖

CSS计数器只能与content性能在一齐的时段才发出意图,而content特性貌似专门用当before/after伪元素上之。于是,就时有发生矣,“计数器↔伪元素↔content属性”的铁三角关系。

其三、CSS计数器成员打挖挖

CSS计数就与我们军训报数一样的!现在,让咱的宁静地闭上眼睛,让思绪飞至青葱的高等学校,那个炎热的伏季,那个大的军训场地,你…想到了呀?——“隔壁班的挺妹妹长得好水灵好可爱我好爱”。囧,还有为?——“露正大腿的可以师姐从前方悠然走过,留下一阵馨香,掳走我之方寸”。……

考古发现 4

明知故犯找抽什么!就算色心满满,脑袋插满刀子,也当想到,帅气的教练有麻痹有!共苦的基友有木有!嘹亮的口号来麻痹有!犀利的报数有麻痹有!

说及报数,是否想起了教练的高亢口号:“生信4次,立正,稍息,开始1,2,3,4回报数!”

内部有这么几单关键点:
1.
班级命名
。总不可知六脉络神剑一指,你,侬,汝来称呼吧~有个名,如生信4次,就懂得谁之是哪个了。
2.
报数规则
。1,2,3,4递增报数,还是1,2,1,2报数,让班级之口知。
3.
启幕报数
。不发口令,大眼瞪小眼,会乱了秩序。

正要的凡,以上3单关键点正好对应CSS计数器的2只属性与1只点子,依次是:
1.
counter-reset

2.
counter-increment

3.
counter()/counters()

梯次说来。
1.
counter-reset

顾名思意,就是“计数器-重置”的意。其实就算是“班级命名”,主要意图就吃计数器起个名。如果可能,顺便告诉下从哪个数字开计数。默认是0,
注意,默认是0而不是1.
可能发同学回疑惑,尼玛网上的各种例子默认显示的第1只数字不都是1啊?那是为吃了counter-increment普照的熏陶,后面会详细讲解。

OK,
这里,我们先行押个别个大概的counter-reset的例子:

.xxx { counter-reset: small-apple; } /* 计数器名称是'small-apple' */

.xxx { counter-reset: small-apple 2; } /* 计数器名称是'small-apple', 并且默认起始值是2 */

闻名不如见面,您可以狠狠地点击这里:counter-reset值为2简单demo

考古发现 5

counter-reset的计数重置可以是负数,例如-2。也可以描绘成小数,例如2.99,不过就算是IE和FireFox都不识别,认为是未合法频值,直接无视,当作默认值0来拍卖;不过Chrome不嫌贫嫉富,任何小数都是望下取整,如2.99当成2拍卖,于是王小二还是那个王小二。

暨之结束?非为无为!counter-reset再有一手,就是基本上单计数器同时命名。例如,王小二以及王小三以上:

.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }

直空格分隔,譬如逗号什么的还好。

闻名不如见面,您得狠狠地点击这里:个别只技术名称并存demo

考古发现 6

另外,counter-reset还可以设置也noneinherit.
干掉重置以及继续重置。你了解的,就非开展了。

2.
counter-increment

顾名思意,就是“计数器-递增”的意。值吗counter-reset的1只或多独第一字。后面可以跟数字,表示每次计数的变化值。如果缺少省,则运用默认变化值1(方便起见,下面的还用默认值做证)。

CSS的计数器的计数是生同样拟规则的,我拿的形象地称为“普照规则”。具体来讲就是:普照源(counter-reset)唯一,每普照(counter-increment)1潮,普照源增加1潮计算数值。

乃,我们得以分解上面提到的“默认值是0”的问题。通常CSS计数器应用的下,我们都见面采取counter-increment,
肯定要因此此,否则怎么递增呢!而且一般还是1次普照,正好+1,第一独计数的值就是1啦(0+1=1)!

下,通过几只例子,给大家像地出示下普照规则

 您得狠狠地点击这里:王小二counter-increment普照成王小三demo

demo中,王小二的counter-reset值是wangxiaoer 2,但是,显示的计数不是有点2而是小3,王小二变成了王小三!
考古发现 7

Demo相关核心代码为:

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); }

<p class="counter"></p>

这里counter-increment普照了p标签,counter-reset值加,默认递增1,于是计数从安的初始值2变成了3wangxiaoer哪怕是此处的计数器,自然伪元素content值counter(wangxiaoer)就是3.

 当然,也得普照自身,也就算是counter-increment直接设置于伪元素上:

.counter { counter-reset: wangxiaoer 2; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }

<p class="counter"></p>

反之亦然是1不成普照,依旧全局的计数器+1,所以,显示的数值或3(demo略).

 趁热打铁。如果父元素和子元素都为counter-increment普照1普,结果会如何为?

挺简单的,父元素1浅普照,子元素1破普照,共少糟普照,counter-reset装的计数器值增加2次,计数起始值是2,于是现实的数字就是4啦!

若得狠狠地点击这里:counter-increment父子连续普照demo

考古发现 8

Demo相关核心代码为:

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }

<p class="counter"></p>    // 显示的是4

一言以蔽之,无论位置于何方,只要出counter-increment,对应的计数器的价就会见转移,counter()偏偏是出口使曾!

 理解了“普照规则”,则坐我们一般的计数器递增效果呢可以知道了。

考虑下这有限单问题:

  1. 大人遭普照,且再度置默认值0,爸爸来2个男女。孩子自都不曾普照。两单子女的计数值是?

  2. 翁并未普照,重置默认值0,爸爸有2个男女。孩子我还领受光照。两只儿女的计数值是?

答案是:1,1和1,2!

啊?答案居然无均等,有什么差别也?

杀简短。什么大人,孩子若都毫不关心。只要看让普照了几软。情况1即便大人让普照,因此,计数器增加1破,此时少个男女的counter当然都是1;
情况2,两个男女吃普照,普照2不良,第1单子女普照的常,计数器+1,也就是1;第2独孩子普照的时再次+1,于是便是2.
遂,两单子女的counter输出就是1,2.

您得狠狠地点击这里:哥们递增规则演示demo

齐demo对诺者的第2只问题,其结果截图如下:
考古发现 9

中心代码如下:

.counter { counter-reset: wangxiaoer 2; }
.counter:before,
.counter:after { content: counter(wangxiaoer); counter-increment: wangxiaoer; }

<p class="counter"></p>

计数器的数值变化仍HTML渲染顺序,遇到一个increment计数器就变更,什么时counter出口就输出此时底计数值。看懂了下图,您当然就是见面完全知晓“普照规则”了。

考古发现 10

假若上图看无清楚,您可以狠狠地点击这里查看HTML与CSS源代码,感受下increment就递增的“普照规则”。

counter-increment其他设定
 counter-reset可以同蹩脚命名两单计数器名称,counter-increment自然产生同之相应的设定,也是名留空就可了。

卿可以狠狠地点击这里:counter-increment多名同时使用demo
考古发现 11

 正如本节起波及的,这变化之值未肯定是1,我们得以灵活设置。例如:

counter-increment: counter 2

这就是说便是偶数偶数的加码。例如下面是变身:
考古发现 12

还得是负数,例如:

counter-increment: counter -1

尽管发出矣递减排序效果啊!

 值还得是none或者inherit.

3.
counter()/counters()

当下是独艺术,不是性。类似CSS3遭到才calc()算。这里作用好单纯显示计数。不过名称、用法有多个:
考古发现 13

 目前为止,我们看的是无与伦比简便的用法:

counter(name) /* name就是counter-reset的名称 */

 那下面这个语法是什么意思呢?

counter(name, style)

这里的style参数还时有发生来几名堂的。其支持的根本字值就是list-style-type支持的那些值。作用是,我们递增递减可以无自然是数字,还可以是英文字母,或者罗马文等。

style=”font-family: ‘courier new’, courier;”>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

闻名不如见面。您可以狠狠地点击这里:CSS计数器counter()方法style参数demo

结果呈现下截图:
考古发现 14

核心CSS代码为:

content: counter(wangxiaoer, lower-roman); /* 以小写罗马数字格式表示当前计数器wangxiaoer的值 */

 counter还支持级联。也就是是一个content属于性值可以产生多只counter()方法。

闻名不如见面。您可狠狠地点击这里:大抵个counter级联并存demo

考古发现 15

核心CSS/HTML如下:

.counter { counter-reset: wangxiaoer 2 wangxiaosan 3; }
.counter:before { content: counter(wangxiaoer) '\A' counter(wangxiaosan); white-space: pre; }

<p class="counter"></p>

面CSS源代码应用'\A'使用inline水平元素换行,此技术使有趣味,可参照之前的“以CSS(Unicode字符)让inline水平元素换行”一文。

 下面介绍下counters()办法。看似值多了个字母s,
但表意考古发现大转移身。counters差一点可以说凡是嵌套计数的代名词。

我们平素之序号,不容许就是只是1,2,3,4,..,
还见面发像 1.1,1.2,1.3,...对等的子序号。得,前者就是counter()论及的作业,后者即是counters()关联的业务。

核心用法乎:

counters(name, string); /* MDN上说,要想IE8兼容,这里逗号后面的空格要去掉,但是鄙人IE11的IE8模式看,无此问题 */

其中,string参数为字符串(需要引号包围的)(必须参数),表示子序号的连接字符串。例如1.1string就是'.'1-1就是'-'.

看上去十分简单。但是,如果知道不是充分深刻,日后以行使一定会逢麻烦——“咦?怎么没有子序列,明明语法正确的哟?”首先,记住这等同句话,“普照源是唯一的”,所以,如果您于只在body签上安装counter-reset,就算里面的子元素嵌套了祖先十八代,还是无见面产生另嵌套序号出现的!所以,要惦记实现嵌套,必须吃各级一个列表容器拥有一个“普照源”,通过子辈对父辈之counter-reset重置、配合counters()计才能够兑现计数嵌套效果。

闻名不如见面。您可以狠狠地点击这里:CSS计数器内嵌demo

考古发现 16

呢会见逢这样的劳动——“咦,怎么分序列不按照层级顺序来什么,命名语法正确啊?”
还是使铭记在心这无异句话:“一个容器里之普照源(reset)是绝无仅有的”,所以,如果你免小心将计数显示与技艺reset元素以兄弟元素形式在同(虽然HTML内容布局呈现是从未怪的),就好可能会见起计数序号乱入的景况。

闻名不如见面。您可以狠狠地点击这里:CSS计数器counters列表被reset乱入demo

会面相标红的一部分的序号显示大了!

考古发现 17

为什么会现出是问题,我们看下HTML(主要是注释):

<div class="reset">
    <div class="counter">我是王小二</div>
    <div class="reset"><-- 这里的reset与上面的counter是兄弟关系,而不是父子关系。虽然布局渲染上没有差异。但是,一个容器的reset的唯一的,一旦子元素出现reset,会改变整个容器的嵌套关系,于是,后面的“王小三”、“王小四”其实已经进入了2级嵌套,因此显示的是1-3和1-4 -->
        ...
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四</div>
    <div class="reset">
        <div class="counter">我是王小四的大儿子</div>
    </div>
</div>

若果点的注释没看明白,您可以同前面没有问题的demo做下HTML结构对比,或许便会豁然开朗!

 counters()呢是支持style自定义递增形式之。

counters(name, string, style)

counter()style参数使用同一,不赘述。

季、CSS计数器与display:none挖挖挖

一个元素,如果设置了counter-increment,
但是其display的属性值是none抑或隐含hidden属性(针对支持浏览器),则此计数值是无会见增多的。而visibility:hidden暨另声明非会见出夫场景。

五、CSS计数器实际用挖挖挖

相比之下传统的ol,ul列表计数,CSS计数器的优势就是在于灵活和强大,不足就是IE6/IE7不支持。

普照规则第一条,普照源唯一。所以,我们好以头尾放两个出入颇远的列表,然后,这些列表自动显示序号。而ol/ul只得写深start贯彻,很无灵敏,一旦列表有剔,就嗝屁了。

鉴于计数器是伪元素控制显示的。因此,我们几乎可下各种CSS样式,各种定位等。所以,基本上,只要出静止序号呈现的地方,就能够采取CSS计数器。

像,电商首页的图片slide广告及之1,2,3,4,...序号;
考古发现 18
咱召开分享下用的HTML5
web在线幻灯片就好以CSS计数器标注页数等;以及同开始让小伙伴等召开的果汁工具的3独选项当。

自身执笔的新本想为几个强保真的例子的,写到此地发现,内容已重重了。一首技术文章,如果念了2分钟,发现才念了大体上,后面的内容就会闪电过,然后会小莫名的评价之类。因此,文章对了长。所以,这里将了了!

六、最后的打总结

CSS计数器的斗量果然十分要命啊。如果不静心沉思,会陷入很多相思当的误区。如果无周到学,也无能为力感受及CSS计数器的无敌潜力所在。就自己自己而言,着实挖到大宝贝了。不知在场的诸位的挖沙成果如何也?

写作匆忙,疏漏难免,若有错,欢迎指正;欢迎联系欢迎交流,更接在仔细翻阅本文后针对片技观点发起挑战!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图