尾类技术器

CSS counter计数器(content目录序号自动递增)详解图片 1

那篇文章发表于
2016年010月2二十二日,星期三,15:54,归类于 css相关
阅读 44148 次, 今日 11 次

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

一、挖坟不可耻

CSS计数器不是怎样独特玩意儿了,早在10年春暖花开的时候,笔者写的“CSS
content内容变更技术以及利用
”一文就要提到(见下图),不过当下是用作其中一员介绍。似乎例行的溜新同事一致,纵然黑如焦炭的自个儿在自作者介绍的时候给新同事留下了深入印象,但鉴于介绍的同事茫茫多,作者只是其中一员。很当然,个把月之后,小编就会被惨酷的遗忘,除了那依稀的脸面,因为终究长得还算比较空虚。
图片 2

而是,CSS计数器的斗量鲜明不是短跑几句介绍可以表露的,所谓人不得貌相。就如本身,说不定某年某月,当年像驴子一样被溜的新同事终于脑袋被门夹了,想起了本人的音容笑貌,找我来寻求救助啊!

自家多年来就碰见这么的情形。

给单位同事做点果汁系统的时候,由于果汁店平日会有瓜果因果品爆发被N多靓妹相中而缺货,因而,每人可以选拔二种自由搭配的饮料。于是,就有了第一选项、第二选项、第叁挑选……
图片 3

本来作者是纯文字写在标签里的。好重好累,感觉不会再爱了!此时,突然眼下一同白光,午休时间截至,阿姨把办公的灯打开了。那恍如隔世的念闪让作者恍然想起了那时霍鲁逊湖畔的“CSS计数器”。想当年,移动web依然草莽,IE六七无中生有。那诱人的技能尽管昭告于世也是受制于包容大环境而腰斩的命。

不过将来差别了,我们相见了二个更好的时日:爱沙尼亚语老师从事古板工业生产锤子,影视大腕以身报国集体赴监狱拍戏大片;在此此前这些受制于IE6/IE7不般配而有天无日的高等CSS/JS天性也干扰走到了台前,CSS计数器就是中间一员。于是,我拿起自我日常钓鱼挖蚯蚓的小锹去挖CSS计数器的坟。即使近日网上已有一些介绍CSS计数器的篇章,但大概不够完善,案例不够美观,查阅也不便民。就像租的屋宇,固然也能挡风遮雨,但装修风格不是祥和的,还寄人篱下,保不准房东借个南风就把自家吹走了。所以啊,有须要本身留一手,去挖个坟然后建个房。

对于纯洁的技术圈而言,挖坟并简单听。大家再次去挖掘过去的那么些作品知识,好像3个考古学家去开掘尘封的野史、消失的雍容一般,是件很有价值的事体。所以,若是大家对发掘考古感兴趣,就跟自个儿一块儿去挖挖挖~~

图片 4

二、CSS计数器三角关系挖挖挖

CSS计数器只可以跟content属性在一齐的时候才有效用,而content属性貌似专门用在before/after伪成分上的。于是,就有了,“计数器↔伪成分↔content属性”的铁三角关系。

三、CSS计数器成员挖挖挖

CSS计数就跟我们军训报数一样的!将来,让大家的悄无声息地闭上眼睛,让思绪飞到青葱的大学,那么些炎热的夏日,那1个宽广的军训地方,你…想到了怎么样?——“隔壁班的格外四妹长得好水灵好可爱作者好喜欢”。囧,还有吗?——“露着大腿的美好师姐在此以前方悠然走过,留下一阵香气,掳走作者的心房”。……

图片 5

故意找抽啊!固然色心满满,脑袋插满刀子,也应当想到,帅气的教练员有木有!共苦的基友有木有!嘹亮的口号有木有!犀利的报数有木有!

说到报数,是或不是想起了主教练的嘹亮口号:“生信4班,立正,稍息,开首1,2,3,4报数!”

其间有如此多少个关键点:
1.
班级命名
。总不大概一阳指一指,你,侬,汝来称呼吗~有个称呼,如生信4班,就领悟什么人的是何人了。
2. 报数规则。1,2,3,4递增报数,仍然1,2,1,2报数,让班级的人知道。
3. 始于报数。不发口令,大眼瞪小眼,会乱了秩序。

巧的是,以上三个关键点正好对应CSS计数器的一个属性和3个方式,依次是:
1. counter-reset
2. counter-increment
3. counter()/counters()

次第说来。
1. counter-reset
顾名思意,就是“计数器-重置”的意思。其实就是“班级命名”,主要意义就是给计数器起个名字。固然恐怕,顺便告诉下从哪个数字开端计数。暗许是0,
注意,默认是0而不是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

图片 6

counter-reset的计数重置可以是负数,例如-2。也足以写成小数,例如2.99,但是就是IE和FireFox都不识别,认为是不合规数值,直接无视,当作默许值0来处理;不过Chrome不嫌贫嫉富,任何小数都以向下取整,如2.99当成2拍卖,于是王小二依然非常王小二。

到此甘休?非也非也!counter-reset还有一手,就是五个计数器同时命名。例如,王小二和王小三同时登台:

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

一贯空格分隔,譬如逗号什么的都分外。

盛名不如相会,您可以狠狠地点击那里:多少个技术名称并存demo

图片 7

另外,counter-reset还能安装为noneinherit.
干掉重置以及持续重置。你懂的,就不开展了。

2. counter-increment
顾名思意,就是“计数器-递增”的情致。值为counter-reset的三个或多少个非常紧要字。后边能够跟随数字,表示每一遍计数的变化值。假使缺省,则采取默许变化值1(方便起见,上边的都拔取默许值做注明)。

CSS的计数器的计数是有一套规则的,作者将之形象地称之为“普照规则”。具体来讲就是:普照源(counter-reset)唯壹,每普照(counter-increment)三回,普照源扩大贰次计数值。

于是乎,大家得以解释上边提到的“暗中认同值是0”的题材。平日CSS计数器应用的时候,大家都会利用counter-increment,
肯定要用这一个,否则怎么递增呢!而且一般都是1次普照,正好+1,第1、个计数的值就是1啦(0+1=1)!

上面,通过几个例子,给我们形象地显示下普照规则

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

demo中,王小二的counter-reset值是wangxiaoer 2,不过,展现的计数不是小2而是小3,王小二变成了王小三!
图片 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遍,结果会怎么着呢?

很简单的,父成分贰次普照,子成分三次普照,共一回普照,counter-reset设置的计数器值扩大1次,计数伊始值是2,于是现实的数字就是4啦!

你可以狠狠地方击那里:counter-increment父子一而再普照demo

图片 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,公公有3个男女。孩子作者都并未普照。五个子女的计数值是?
  2. 爹爹没有普照,重置默许值0,二叔有一个儿女。孩子本人都接受光照。七个孩子的计数值是?

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

嗯?答案居然不同,有啥样分化呢?

很简短。什么伯伯,孩子你都无须关心。只要看被普照了四次。意况1就五叔被普照,因此,计数器扩展贰次,此时多少个子女的counter本来都以1;
情形2,多个孩子被普照,普照二回,首个男女普照之时,计数器+1,也等于1;第3个子女普照之时再+1,于是就是2.
于是,三个儿女的counter出口就是1,2.

您可以狠狠地方击那里:手足递增规则演示demo

上demo对应上边的第叁,个难题,其结果截图如下:
图片 10

骨干代码如下:

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

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

计数器的数值变化听从HTML渲染顺序,遭逢2个increment计数器就变更,几时counter出口就输出此时的计数值。看懂了下图,您当然就会完全知晓“普照规则”了。

图片 11

借使上图看不亮堂,您可以狠狠地点击那里查看HTML与CSS源代码,感受下increment即递增的“普照规则”。

counter-increment其他设定
 counter-reset可以一遍命名三个计数器名称,counter-increment自然有与之对应的设定,也是称呼留空就足以了。

你可以狠狠地点击那里:counter-increment多名称同时利用demo
图片 12

 正如本节开端波及的,那变化的值不自然是1,我们得以灵活设置。例如:

counter-increment: counter 2

这就是偶数偶数的加码。例如上面这几个变身:
图片 13

还足以是负数,例如:

counter-increment: counter -1

就有了递减排序效果啊!

 值还足以是none或者inherit.

3. counter()/counters()
那是个主意,不是性质。类似CSS3中才calc()测算。这里成效很单纯突显计数。然则名称、用法有三个:
图片 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

结果见下截图:
图片 15

核心CSS代码为:

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

 counter还接济级联。约等于1个content属性值可以有三个counter()方法。

有名不如会师。您可以狠狠地方击那里:八个counter级联并存demo

图片 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

图片 17

也会遇见那样的坚苦——“咦,怎么子体系不按层级顺序来啊,命名语法正确啊?”
照旧要记住这一句话:“一个容器里的普照源(reset)是唯一的”,所以,如若您不小心把计数突显和技能reset成分以兄弟成分模式放在一块儿(固然HTML内容布局突显是没有极度的),就很或然会现出计数序号乱入的场合。

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

会看到标红的局地的序号突显极度了!

图片 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以及此外表明不会有此现象。

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

对待古板的ol,ul列表计数,CSS计数器的优势就在于灵活与强大,不足就是IE6/IE7不援救。

普照规则第贰条,普照源唯一。所以,我们能够在头尾放多少个分歧甚远的列表,然后,那些列表自动突显序号。而ol/ul唯其如此写死start兑现,很不灵便,一旦列表有删减,就嗝屁了。

出于计数器是伪成分控制呈现的。由此,大家大约可以采用各样CSS样式,各个定位等。所以,基本上,只要有静止序号展现的地点,就能利用CSS计数器。

比如说,电商首页的图形slide广告上的1,2,3,4,...序号;
图片 19
大家做分享时候使用的HTML5
web在线幻灯片就足以应用CSS计数器标注页数等;以及一开头给小伙伴们做的果汁工具的三个选项等。

自作者执笔之初本想搞多少个高保真的事例的,写到那里发现,内容早已重重了。一篇技术小说,即使读了2分钟,发现才读了大体上,前边的内容就会雷暴过,然后会有个别莫名的评头品足之类。因而,小说不易过长。所以,那里即将停止了!

六、最后的打桩总括

CSS计数器的斗量果然很深啊。倘使不静心沉思,会陷入很多想当然的误区。如果不周详学习,也心中无数感受到CSS计数器的雄强潜力所在。就自身要好而言,着实挖到大宝贝了。不知在场的各位的掘进成果如何呢?

创作匆忙,疏漏难免,若有不当,欢迎指正;欢迎联系欢迎交换,更欢迎在密切翻阅本文后对一部分技巧观点发起挑战!

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

发表评论

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

网站地图xml地图