应用问题讲解及实例演示韦德娱乐1946手机版

一、挖坟不可耻

CSS计数器不是何许独特玩意儿了,早在10年春暖花开的时候,我写的“CSS
content内容变更技术以及接纳
”一文就要提到(见下图),然则当下是用作其中一员介绍。就像例行的溜新同事一致,即便黑如焦炭的自己在自我介绍的时候给新同事留下了深切映像,但出于介绍的同事茫茫多,我只是其中一员。很当然,个把月之后,我就会被无情的遗忘,除了这依稀的面部,因为毕竟长得还算相比空虚。
韦德娱乐1946手机版 1

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

自身多年来就碰见那样的情事。

给机关同事做点果汁系统的时候,由于果汁店平时会有瓜果因果品发生被N多靓妹相中而缺货,由此,每人可以挑选两种自由搭配的饮品。于是,就有了第1挑选、第2挑选、第3精选……
韦德娱乐1946手机版 2

自然我是纯文字写在标签里的。好重好累,感觉不会再爱了!此时,突然眼前联名白光,午休时间停止,三姑把办公的灯打开了。这恍如隔世的念闪让自家恍然想起了这时玄武湖畔的“CSS计数器”。想当年,移动web如故草莽,IE六七兴风作浪。这诱人的技艺固然昭告于世也是受制于兼容大环境而腰斩的命。

不过现在不同等了,大家际遇了一个更好的时日:盖尔语老师从事传统工业生产锤子,影视大腕舍身取义集体赴监狱拍摄大片;在此从前那多少个受制于IE6/IE7不般配而有天无日的高等级CSS/JS特性也扰乱走到了台前,CSS计数器就是中间一员。于是,我拿起自我平时钓鱼挖蚯蚓的小锹去挖CSS计数器的坟。即使眼前网上已有一对介绍CSS计数器的稿子,但差不多不够完善,案例不够理想,查阅也不便民。就像是租的屋宇,虽然也能挡风遮雨,但装修风格不是友善的,还寄人篱下,保不准房东借个东风就把自家吹走了。所以啊,有必要自己留一手,去挖个坟然后建个房。

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

韦德娱乐1946手机版 3

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

CSS计数器只好跟content属性在协同的时候才有功效,而content性能貌似专门用在before/after伪元素上的。于是,就有了,“计数器↔伪元素↔content属性”的铁三角关系。

三、CSS计数器成员挖挖挖

CSS计数就跟我们军训报数一样的!现在,让我们的宁静地闭上眼睛,让思绪飞到青葱的高校,那么些炎热的夏天,那一个宽广的军训场所,你…想到了哪些?——“隔壁班的不胜二妹长得好水灵好可爱我好喜欢”。囧,还有啊?——“露着大腿的不错师姐此前边悠然走过,留下一阵清香,掳走我的心房”。……

韦德娱乐1946手机版 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

韦德娱乐1946手机版 5

counter-reset的计数重置能够是负数,例如-2。也足以写成小数,例如2.99,但是就是IE和Fire福克斯(Fox)(Fox)都不识别,认为是不合法数值,直接无视,当作默认值0来处理;可是Chrome不嫌贫嫉富,任何小数都是向下取整,如2.99当成2拍卖,于是王小二依然特别王小二。

到此截至?非也非也!counter-reset再有一手,就是三个计数器同时命名。例如,王小二和王小三同时登场:

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

一向空格分隔,譬如逗号什么的都很是。

著名不如相会,您可以狠狠地方击这里:五个技术名称并存demo

韦德娱乐1946手机版 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)!

下面,通过多少个例证,给我们形象地显示下普照规则

韦德娱乐1946手机版, 您可以狠狠地点击这里:王小二counter-increment普照成王小三demo

demo中,王小二的counter-reset值是wangxiaoer 2,不过,显示的计数不是小2而是小3,王小二变成了王小三!
韦德娱乐1946手机版 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

韦德娱乐1946手机版 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个问题,其结果截图如下:
韦德娱乐1946手机版 9

核心代码如下:

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

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

计数器的数值变化坚守HTML渲染顺序,遭受一个increment计数器就变化,何时counter输出就输出此时的计数值。看懂了下图,您当然就会全盘知晓“普照规则”了。

韦德娱乐1946手机版 10

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

counter-increment其他设定
 counter-reset可以两回命名多少个计数器名称,counter-increment本来有与之相应的设定,也是称呼留空就足以了。

你可以狠狠地方击这里:counter-increment多名称同时采纳demo
韦德娱乐1946手机版 11

 正如本节启幕波及的,那变化的值不肯定是1,我们可以灵活设置。例如:

counter-increment: counter 2

这就是偶数偶数的扩展。例如下面这些变身:
韦德娱乐1946手机版 12

还足以是负数,例如:

counter-increment: counter -1

就有了递减排序效果啊!

 值仍可以是none或者inherit.

3.
counter()/counters()

这是个点子,不是性质。类似CSS3中才calc()测算。那里功用很单纯展现计数。但是名称、用法有三个:
韦德娱乐1946手机版 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

结果见下截图:
韦德娱乐1946手机版 14

核心CSS代码为:

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

 counter还帮助级联。也就是一个content属性值可以有四个counter()方法。

闻明不如相会。您可以狠狠地方击这里:四个counter级联并存demo

韦德娱乐1946手机版 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

韦德娱乐1946手机版 16

也会遭遇这么的劳动——“咦,怎么子体系不按层级顺序来啊,命名语法正确啊?”
依然要铭记这一句话:“一个容器里的普照源(reset)是绝无仅有的”,所以,倘使你不小心把计数彰显和技巧reset元素以兄弟元素格局放在一块儿(即使HTML内容布局显示是从未有过充足的),就很可能会合世计数序号乱入的意况。

闻明不如会晤。您可以狠狠地方击这里:CSS计数器counters列表被reset乱入demo

会看出标红的局部的序号显示异常了!

韦德娱乐1946手机版 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,...序号;
韦德娱乐1946手机版 18
我们做分享时候使用的HTML5
web在线幻灯片就足以采用CSS计数器标注页数等;以及一开首给小伙伴们做的果汁工具的3个挑选等。

自家执笔之初本想搞多少个高保真的例证的,写到这里发现,内容已经重重了。一篇技术作品,即使读了2分钟,发现才读了大体上,后边的始末就会闪电过,然后会略微莫名的褒贬之类。因而,作品不易过长。所以,这里即将截至了!

六、最终的挖掘总括

CSS计数器的斗量果然很深啊。如果不静心思考,会陷于很多想当然的误区。假若不完善学习,也惊惶失措感受到CSS计数器的强大潜力所在。就我自己而言,着实挖到大宝贝了。不知在场的诸位的挖掘成果怎样呢?

写作匆忙,疏漏难免,若有不当,欢迎指正;欢迎联系欢迎沟通,更欢迎在精心阅读本文后对部分技艺观点发起挑衅!

发表评论

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

网站地图xml地图