必威体育app官网css befroe after 尾类技术器

CSS counter计数器(content目录序号自动递增)详解必威体育app官网 1

顿时首文章发布给
2014年08月26日,星期二,15:54,归类为 css相关。
阅读 44148 次, 今日 11 次

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=4303

无异于、挖坟不可耻

CSS计数器不是啊异常玩意儿了,早以10年春暖花开的下,我写的“CSS
content内容变更技术以及以”一软就设涉及(见下图),不过就凡当做中同样位介绍。就像例行之溜新同事一样,虽然黑而焦炭的我当自我介绍的下给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是内同样个。很当然,个将月后,我不怕见面为无情之遗忘,除了那依稀的面,因为毕竟长得还算比较泛。
必威体育app官网 2

而,CSS计数器的斗量显然不是一朝一夕几句子介绍能够显露的,所谓人不可貌相。就像我,说不定某年某月,当年诸如驴子一样被溜的新同事终于脑袋给派夹了,想起了自己的音容笑貌,找我来寻求帮助吗!

自己近年便赶上这么的状况。

叫部门同事开点果汁系统的时节,由于果汁店经常会发水果因果品爆发被N多靓妹相遭遇如果缺货,因此,每人可择三种植自由搭配的饮品。于是,就产生矣第1选择、第2选择、第3选择……
必威体育app官网 3

当我是纯文字勾勒于标签里之。好重好辛苦,感觉不会见另行容易了!此时,突然前面并白光,午休时间截止,阿姨将办公室的灯火打开了。这恍如隔世的念闪让自家猛然想起了当初大明湖畔的“CSS计数器”。想当年,移动web还是草莽,IE六七兴风作浪。这诱人之艺就昭告于世界也是受制于兼容大条件一旦腰斩之指令。

不过今非雷同了,我们遇到了一个复好的一世:英语老师从事传统工业生产锤子,影视大腕舍身取义集体去监狱拍摄大片;以前那些受制于IE6/IE7不匹配而不见天日的高等级CSS/JS特性也纷纷走至了光前,CSS计数器就是中同样各。于是,我以起自我平常钓鱼挖蚯蚓的稍锹去打CSS计数器的墓葬。虽然手上网上曾生一些介绍CSS计数器的文章,但大多不敷完善,案例不敷帅,查阅也无便民。就像是租赁的房,虽然也能够挡风遮雨,但装修风格不是祥和之,还依托人篱下,保不准房东借个东风就拿自身吹走了。所以什么,有必要自己留一手,去发掘个坟然后打个作坊。

对纯洁的技艺圈而言,挖坟并无丢人。我们重去开掘过去的那些文章知识,好像一个考古学家去发掘尘封的史、消失的儒雅一般,是桩非常有价的作业。所以,如果大家对发掘考古感兴趣,就和自己一块儿错过挖掘挖挖~~

必威体育app官网 4

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

CSS计数器只能与content特性在齐的当儿才起意图,而content属性貌似专门就此在before/after伪元素上之。于是,就生了,“计数器↔伪元素↔content属性”的铁三角关系。

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

CSS计数就与我们军训报数一样的!现在,让咱们的寂静地闭上眼睛,让思绪飞至青葱的大学,那个炎热的夏日,那个大的军训场地,你…想到了呀?——“隔壁班的深妹妹长得好水灵好可爱我好爱”。囧,还有吗?——“露正大腿的大好师姐从前方悠然走过,留下一阵香气,掳走自己之心尖”。……

必威体育app官网 5

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

说及报数,是否想起了教练的激越口号:“生信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

必威体育app官网 6

counter-reset的计数重置可以是负数,例如-2。也足以形容成小数,例如2.99,不过尽管是IE和FireFox都不识别,认为是不合法频值,直接无视,当作默认值0来处理;不过Chrome不嫌贫嫉富,任何小数都是通向下取整,如2.99当成2处理,于是王小二还是死王小二。

交者结束?非为不为!counter-reset再有一手,就是多独计数器同时命名。例如,王小二同王小三以登场:

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

直接空格分隔,譬如逗号什么的且生。

闻名不如见面,您可以狠狠地点击这里:有数个技巧名称并存demo

必威体育app官网 7

另外,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,王小二变成了王小三!
必威体育app官网 8

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

必威体育app官网 9

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只问题,其结果截图如下:
必威体育app官网 10

骨干代码如下:

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

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

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

必威体育app官网 11

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

counter-increment其他设定
 counter-reset可以同涂鸦命名两只计数器名称,counter-increment理所当然发出与之对应的设定,也是名留空就可了。

汝可以狠狠地点击这里:counter-increment多名同时以demo
必威体育app官网 12

 正如本节开班波及的,这变化的价未自然是1,我们可以灵活设置。例如:

counter-increment: counter 2

那么就算是偶数偶数的增多。例如下面是变身:
必威体育app官网 13

尚好是负数,例如:

counter-increment: counter -1

哪怕有矣递减排序效果啊!

 值还足以是none或者inherit.

3. counter()/counters()
及时是只措施,不是性质。类似CSS3面临才calc()计算。这里作用充分单纯显示计数。不过名称、用法有多独:
必威体育app官网 14

 目前为止,我们来看底凡极其简易的用法:

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

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

结果呈现下截图:
必威体育app官网 15

核心CSS代码为:

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

 counter还支持级联。也便是一个content属于性值可以起差不多个counter()方法。

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

必威体育app官网 16

核心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

必威体育app官网 17

否会碰到这样的累——“咦,怎么分序列不按层级顺序来什么,命名语法正确啊?”
还是只要切记这同句话:“一个器皿里之普照源(reset)是绝无仅有的”,所以,如果你切莫小心把计数显示与技艺reset元素以兄弟元素形式在一块儿(虽然HTML内容布局呈现是尚未那个的),就不行可能会见面世计数序号乱入的情。

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

见面看标红的有些的序号显示大了!

必威体育app官网 18

何以会并发这个题材,我们看下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及其它声明非会见发其一情景必威体育app官网。

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

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

普照规则第一漫长,普照源唯。所以,我们可以当头尾放两独出入十分远之列表,然后,这些列表自动显示序号。而ol/ul不得不写好start心想事成,很不灵活,一旦列表有去,就嗝屁了。

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

譬如,电商首页的图片slide广告及之1,2,3,4,...序号;
必威体育app官网 19
我们召开分享下利用的HTML5
web在线幻灯片就得用CSS计数器标注页数等;以及同开始给多少伙伴等召开的果汁工具的3独选择相当。

本人修的新本纪念抓几独大保真的事例的,写及这里发现,内容都多了。一篇技术文章,如果念了2分钟,发现才读了大体上,后面的始末即会见闪电过,然后会略莫名的评之类。因此,文章是了长。所以,这里就要收了!

六、最后之掘进总结

CSS计数器的斗量果然很非常啊。如果未静心思考,会陷于很多想当的误区。如果非完善学习,也无法感受及CSS计数器的无敌潜力所在。就我自己而言,着实挖到大宝贝了。不知在场的各位的打通成果如何为?

创作匆忙,疏漏难免,若发生误,欢迎指正;欢迎联系欢迎交流,更欢迎在仔细阅读本文后对有技艺观点发起挑战!

转载至http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

Post Author: admin

发表评论

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