选取难题讲解及实例演示

一、挖坟不可耻

CSS计数器不是怎么样独特玩意儿了,早在10年春暖花开的时候,我写的“CSS
content内容变更技术以及选取
”一文就要提到(见下图),可是当下是当做其中一员介绍。就如例行的溜新同事一致,即使黑如焦炭的自家在自我介绍的时候给新同事留下了深刻印象,但鉴于介绍的同事茫茫多,我只是其中一员。很当然,个把月之后,我就会被严酷的遗忘,除了那依稀的人脸,因为毕竟长得还算比较抽象。
考古发现 1

不过,CSS计数器的斗量鲜明不是短跑几句介绍可以表露的,所谓人不可貌相。就像是自家,说不定某年某月,当年像驴子一样被溜的新同事终于脑袋被门夹了,想起了自我的音容笑貌,找我来谋求支援吗!

本人近年就碰见这么的图景。

给部门同事做点果汁系统的时候,由于果汁店平日会有瓜果因果品发生被N多靓妹相中而缺货,由此,每人可以选用三种自由搭配的饮品。于是,就有了第1选项、第2挑选、第3挑选……
考古发现 2

本来我是纯文字写在标签里的。好重好累,感觉不会再爱了!此时,突然后边共同白光,午休时间为止,二姑把办公室的灯打开了。那恍如隔世的念闪让自身猛然想起了当初千岛湖畔的“CSS计数器”。想当年,移动web仍旧草莽,IE六七惹事生非。那诱人的技能尽管昭告于世也是受制于包容大环境而腰斩的命。

不过现在不一致了,大家蒙受了一个更好的一世:日语老师从事传统工业生产锤子,影视大腕为国损躯集体赴监狱拍摄大片;往日那么些受制于IE6/IE7不包容而不见天日的高等级CSS/JS特性也混乱走到了台前,CSS计数器就是中间一员。于是,我拿起自我常常钓鱼挖蚯蚓的小锹去挖CSS计数器的坟。即使眼下网上已有一部分介绍CSS计数器的作品,但大多不够完善,案例不够理想,查阅也不便宜。似乎租的屋宇,固然也能挡风遮雨,但装修风格不是协调的,还寄人篱下,保不准房东借个南风就把自家吹走了。所以啊,有需求自己留一手,去挖个坟然后建个房。

对于纯洁的技术圈而言,挖坟并简单听。大家再一次去挖掘过去的那多少个小说知识,好像一个考古学家去开掘尘封的野史、消失的文圣元(Friso)般,是件很有价值的业务。所以,假使大家对发掘考古感兴趣,就跟自己一块儿去挖挖挖~~

考古发现 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支持的那么些值。成效是,我们递增递减可以不自然是数字,仍可以够是英文字母,或者罗Marvin等。

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