CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程

這篇文章主要講解了“CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程”吧！

在碭山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),成都營(yíng)銷網(wǎng)站建設(shè),外貿(mào)營(yíng)銷網(wǎng)站建設(shè),碭山網(wǎng)站建設(shè)費(fèi)用合理。

一、挖墳不可恥

CSS計(jì)數(shù)器不是什么新鮮玩意了，早在10年春暖花開的時(shí)候，我寫的“CSS content內(nèi)容生成技術(shù)以及應(yīng)用”一文就要提到（見下圖），不過(guò)當(dāng)時(shí)是作為其中一員介紹。就像例行的溜新同事一樣，雖然黑如焦炭的我在自我介紹的時(shí)候給新同事留下了深刻印象，但由于介紹的同事茫茫多，我只是其中一員。很自然，個(gè)把月之后，我就會(huì)被無(wú)情的淡忘，除了那依稀的面龐，因?yàn)楫吘归L(zhǎng)得還算比較抽象。

然而，CSS計(jì)數(shù)器的斗量顯然不是短短幾句介紹能夠顯露的，所謂人不可貌相。就像我，說(shuō)不定某年某月，當(dāng)年像驢子一樣被溜的新同事終于腦袋被門夾了，想起了我的音容笑貌，找我來(lái)尋求幫助呢！

我最近就遇到這樣的情況。

給部門同事做點(diǎn)果汁系統(tǒng)的時(shí)候，由于果汁店經(jīng)常會(huì)有水果因果品爆發(fā)被N多靚妹相中而缺貨，因此，每人可以選擇三種自由搭配的飲品。于是，就有了第1選擇、第2選擇、第3選擇……

本來(lái)我是純文字寫在標(biāo)簽里的。好重好累，感覺不會(huì)再愛了！此時(shí)，突然眼前一道白光，午休時(shí)間結(jié)束，阿姨把辦公室的燈打開了。這恍如隔世的念閃讓我突然想起了當(dāng)年大明湖畔的“CSS計(jì)數(shù)器”。想當(dāng)年，移動(dòng)web還是草莽，IE六七興風(fēng)作浪。這誘人的技能就算昭告于世也是受制于兼容大環(huán)境而腰斬的命。

但是現(xiàn)在不一樣了，我們趕上了一個(gè)更好的時(shí)代：英語(yǔ)老師從事傳統(tǒng)工業(yè)生產(chǎn)錘子，影視明星舍身取義集體赴監(jiān)獄拍攝大片；以前那些受制于IE6/IE7不兼容而不見天日的高級(jí)CSS/JS特性也紛紛走到了臺(tái)前，CSS計(jì)數(shù)器就是其中一員。于是，我拿起我平時(shí)釣魚挖蚯蚓的小鍬去挖CSS計(jì)數(shù)器的墳。雖然目前網(wǎng)上已有一些介紹CSS計(jì)數(shù)器的文章，但大多不夠全面，案例不夠精彩，查閱也不方便。就像是租的房子，雖然也能擋風(fēng)遮雨，但裝修風(fēng)格不是自己的，還寄人籬下，保不準(zhǔn)房東借個(gè)東風(fēng)就把我吹走了。所以啊，有必要自己留一手，去挖個(gè)墳然后建個(gè)房。

對(duì)于純潔的技術(shù)圈而言，挖墳并不可恥。我們重新去挖掘過(guò)去的那些文章知識(shí)，好像一個(gè)考古學(xué)家去挖掘塵封的歷史、消失的文明一般，是件很有價(jià)值的事情。所以，如果大家對(duì)挖掘考古感興趣，就跟我一起去挖挖挖~~

二、CSS計(jì)數(shù)器三角關(guān)系挖挖挖

CSS計(jì)數(shù)器只能跟content屬性在一起的時(shí)候才有作用，而content屬性貌似專門用在before/after偽元素上的。于是，就有了，“計(jì)數(shù)器↔偽元素↔content屬性”的鐵三角關(guān)系。

三、CSS計(jì)數(shù)器成員挖挖挖

CSS計(jì)數(shù)就跟我們軍訓(xùn)報(bào)數(shù)一樣的！現(xiàn)在，讓我們的靜靜地閉上眼睛，讓思緒飛到青蔥的大學(xué)，那個(gè)炎熱的夏日，那個(gè)寬廣的軍訓(xùn)場(chǎng)地，你…想到了什么？——“隔壁班的那個(gè)妹子長(zhǎng)得好水靈好可愛我好喜歡”。囧，還有呢？——“露著大腿的漂亮師姐從面前悠然走過(guò)，留下一陣芬芳，擄走我的心房”。……

成心找抽?。【退闵臐M滿，腦袋插滿刀子，也應(yīng)該想到，帥氣的教官有木有！共苦的基友有木有！嘹亮的口號(hào)有木有！犀利的報(bào)數(shù)有木有！

說(shuō)到報(bào)數(shù)，是否想起了教官的嘹亮口號(hào)：“生信4班，立正，稍息，開始1,2,3,4報(bào)數(shù)！”

其中有這么幾個(gè)關(guān)鍵點(diǎn)：
1. 班級(jí)命名?？偛荒芰}神劍一指，你，儂，汝來(lái)稱呼吧~有個(gè)稱呼，如生信4班，就知道誰(shuí)的是誰(shuí)了。
2. 報(bào)數(shù)規(guī)則。1,2,3,4遞增報(bào)數(shù)，還是1,2,1,2報(bào)數(shù)，讓班級(jí)的人知道。
3. 開始報(bào)數(shù)。不發(fā)口令，大眼瞪小眼，會(huì)亂了秩序。

巧的是，以上3個(gè)關(guān)鍵點(diǎn)正好對(duì)應(yīng)CSS計(jì)數(shù)器的2個(gè)屬性和1個(gè)方法，依次是：
1. counter-reset
2. counter-increment
3. counter()/counters()

依次說(shuō)來(lái)。
1. counter-reset
顧名思意，就是“計(jì)數(shù)器-重置”的意思。其實(shí)就是“班級(jí)命名”，主要作用就是給計(jì)數(shù)器起個(gè)名字。如果可能，順便告訴下從哪個(gè)數(shù)字開始計(jì)數(shù)。默認(rèn)是0, 注意，默認(rèn)是0而不是1. 可能有同學(xué)回疑惑，尼瑪網(wǎng)上的各種例子默認(rèn)顯示的第1個(gè)數(shù)字不都是1嗎？那是因?yàn)槭芰?code>counter-increment普照的影響，后面會(huì)詳細(xì)講解。

OK, 這里，我們先看兩個(gè)簡(jiǎn)單的counter-reset的例子：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .xxx { countercounter-reset: small-apple; } /* 計(jì)數(shù)器名稱是'small-apple' */    

2. .xxx { countercounter-reset: small-apple 2; } /* 計(jì)數(shù)器名稱是'small-apple', 并且默認(rèn)起始值是2 */   

聞名不如見面，您可以狠狠地點(diǎn)擊這里：counter-reset值為2簡(jiǎn)單demo

counter-reset的計(jì)數(shù)重置可以是負(fù)數(shù)，例如-2。也可以寫成小數(shù)，例如2.99，不過(guò)就是IE和FireFox都不識(shí)別，認(rèn)為是不合法數(shù)值，直接無(wú)視，當(dāng)作默認(rèn)值0來(lái)處理；不過(guò)Chrome不嫌貧嫉富，任何小數(shù)都是向下取整，如2.99當(dāng)成2處理，于是王小二還是那個(gè)王小二。

到此為止？非也非也！counter-reset還有一手，就是多個(gè)計(jì)數(shù)器同時(shí)命名。例如，王小二和王小三同時(shí)登臺(tái)：

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

直接空格分隔，譬如逗號(hào)什么的都不行。

聞名不如見面，您可以狠狠地點(diǎn)擊這里：兩個(gè)技術(shù)名稱并存demo

另外，counter-reset還可以設(shè)置為none和inherit. 干掉重置以及繼承重置。你懂的，就不展開了。

2. counter-increment

顧名思意，就是“計(jì)數(shù)器-遞增”的意思。值為counter-reset的1個(gè)或多個(gè)關(guān)鍵字。后面可以跟隨數(shù)字，表示每次計(jì)數(shù)的變化值。如果缺省，則使用默認(rèn)變化值1（方便起見，下面的都使用默認(rèn)值做說(shuō)明）。

CSS的計(jì)數(shù)器的計(jì)數(shù)是有一套規(guī)則的，我將之形象地稱為“普照規(guī)則”。具體來(lái)講就是：普照源(counter-reset)唯一，每普照(counter-increment)1次，普照源增加1次計(jì)數(shù)值。

于是，我們可以解釋上面提到的“默認(rèn)值是0”的問(wèn)題。通常CSS計(jì)數(shù)器應(yīng)用的時(shí)候，我們都會(huì)使用counter-increment, 肯定要用這個(gè)，否則怎么遞增呢！而且一般都是1次普照，正好+1，第一個(gè)計(jì)數(shù)的值就是1啦(0+1=1)！

下面，通過(guò)幾個(gè)例子，給大家形象地展示下普照規(guī)則。

① 您可以狠狠地點(diǎn)擊這里：王小二counter-increment普照成王小三demo

demo中，王小二的counter-reset值是wangxiaoer 2，但是，顯示的計(jì)數(shù)不是小2而是小3，王小二變成了王小三！


Demo相關(guān)核心代碼為：

代碼如下:

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); }
<p class="counter"></p>

這里counter-increment普照了p標(biāo)簽，counter-reset值增加，默認(rèn)遞增1，于是計(jì)數(shù)從設(shè)置的初始值2變成了3，wangxiaoer就是這里的計(jì)數(shù)器，自然偽元素content值counter(wangxiaoer)就是3.

② 當(dāng)然，也可以普照自身，也就是counter-increment直接設(shè)置在偽元素上：

代碼如下:

.counter { counter-reset: wangxiaoer 2; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class="counter"></p>

依然是1次普照，依舊全局的計(jì)數(shù)器+1，所以，顯示的數(shù)值還是3(demo略).

③ 趁熱打鐵。如果父元素和子元素都被counter-increment普照1遍，結(jié)果會(huì)如何呢？

很簡(jiǎn)單的，父元素1次普照，子元素1次普照，共兩次普照，counter-reset設(shè)置的計(jì)數(shù)器值增加2次，計(jì)數(shù)起始值是2，于是現(xiàn)實(shí)的數(shù)字就是4啦！

您可以狠狠地點(diǎn)擊這里：counter-increment父子連續(xù)普照demo

Demo相關(guān)核心代碼為：

代碼如下:

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class="counter"></p>    // 顯示的是4

總而言之，無(wú)論位置在何方，只要有counter-increment，對(duì)應(yīng)的計(jì)數(shù)器的值就會(huì)變化，counter()只是輸出而已！

④ 理解了“普照規(guī)則”，則以我們通常的計(jì)數(shù)器遞增效果也可以理解了。

考慮下面這兩個(gè)問(wèn)題：

爸爸受到普照，且重置默認(rèn)值0，爸爸有2個(gè)孩子。孩子自身都沒有普照。兩個(gè)孩子的計(jì)數(shù)值是？爸爸沒有普照，重置默認(rèn)值0，爸爸有2個(gè)孩子。孩子自身都接受普照。兩個(gè)孩子的計(jì)數(shù)值是？
答案是：1,1和1,2!

哦？答案居然不一樣，有什么差別呢？

很簡(jiǎn)單。什么爸爸，孩子你都不要關(guān)心。只要看被普照了幾次。情況1就爸爸被普照，因此，計(jì)數(shù)器增加1次，此時(shí)兩個(gè)孩子的counter自然都是1; 情況2，兩個(gè)孩子被普照，普照2次，第1個(gè)孩子普照之時(shí)，計(jì)數(shù)器+1，也就是1；第2個(gè)孩子普照之時(shí)再+1，于是就是2. 于是，兩個(gè)孩子的counter輸出就是1,2.

您可以狠狠地點(diǎn)擊這里：兄弟遞增規(guī)則演示demo

上demo對(duì)應(yīng)上面的第2個(gè)問(wèn)題，其結(jié)果截圖如下：

核心代碼如下：

代碼如下:

.counter { counter-reset: wangxiaoer 2; }
.counter:before,.counter:after { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class="counter"></p>

計(jì)數(shù)器的數(shù)值變化遵循HTML渲染順序，遇到一個(gè)increment計(jì)數(shù)器就變化，什么時(shí)候counter輸出就輸出此時(shí)的計(jì)數(shù)值?？炊讼聢D，您自然就會(huì)全然明白“普照規(guī)則”了。

如果上圖看不明白，您可以狠狠地點(diǎn)擊這里查看HTML與CSS源代碼，感受下increment即遞增的“普照規(guī)則”。

counter-increment其他設(shè)定
① counter-reset可以一次命名兩個(gè)計(jì)數(shù)器名稱，counter-increment自然有與之呼應(yīng)的設(shè)定，也是名稱留空就可以了。

您可以狠狠地點(diǎn)擊這里：counter-increment多名稱同時(shí)應(yīng)用demo

② 正如本節(jié)開始提到的，這變化的值不一定是1，我們可以靈活設(shè)置。例如：

counter-increment: counter 2

那就是偶數(shù)偶數(shù)的增加。例如下面這個(gè)變身：

還可以是負(fù)數(shù)，例如：

counter-increment: counter -1

就有了遞減排序效果啦！

③ 值還可以是none或者inherit.

3. counter()/counters()
這是個(gè)方法，不是屬性。類似CSS3中才calc()計(jì)算。這里作用很單純顯示計(jì)數(shù)。不過(guò)名稱、用法有多個(gè)：

① 目前為止，我們看到的是最簡(jiǎn)單的用法：

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

② 那下面這個(gè)語(yǔ)法是什么意思呢？

counter(name, style)

這里的style參數(shù)還有有些名堂的。其支持的關(guān)鍵字值就是list-style-type支持的那些值。作用是，我們遞增遞減可以不一定是數(shù)字，還可以是英文字母，或者羅馬文等。

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

聞名不如見面。您可以狠狠地點(diǎn)擊這里：CSS計(jì)數(shù)器counter()方法style參數(shù)demo

結(jié)果見下截圖：

核心CSS代碼為：

content: counter(wangxiaoer, lower-roman); /* 以小寫羅馬數(shù)字格式表示當(dāng)前計(jì)數(shù)器wangxiaoer的值 */

③ counter還支持級(jí)聯(lián)。也就是一個(gè)content屬性值可以有多個(gè)counter()方法。

聞名不如見面。您可以狠狠地點(diǎn)擊這里：多個(gè)counter級(jí)聯(lián)并存demo

核心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水平元素?fù)Q行，此技術(shù)若有興趣，可參考之前的“使用CSS(Unicode字符)讓inline水平元素?fù)Q行”一文。

④ 下面介紹下counters()方法?？此浦刀嗔藗€(gè)字母s, 但表意大變身。counters幾乎可以說(shuō)是嵌套計(jì)數(shù)的代名詞。

我們平時(shí)的序號(hào)，不可能就只是1,2,3,4,.., 還會(huì)有諸如 1.1,1.2,1.3,...等的子序號(hào)。得，前者就是counter()干的事情，后者就是counters()干的事情。

基本用法為：

counters(name, string); /* MDN上說(shuō)，要想IE8兼容，這里逗號(hào)后面的空格要去掉，但是鄙人IE11的IE8模式看，無(wú)此問(wèn)題 */

其中，string參數(shù)為字符串（需要引號(hào)包圍的）（必須參數(shù)），表示子序號(hào)的連接字符串。例如1.1的string就是'.', 1-1就是'-'.

看上去很簡(jiǎn)單。但是，如果理解不是很深刻，日后在使用肯定會(huì)遇到麻煩&mdash;&mdash;“咦？怎么沒有子序列，明明語(yǔ)法正確的??？”首先，記住這一句話，“普照源是唯一的”，所以，如果你在只在body標(biāo)簽上設(shè)置counter-reset，就算里面的子元素嵌套了祖宗十八代，還是不會(huì)有任何嵌套序號(hào)出現(xiàn)的！所以，要想實(shí)現(xiàn)嵌套，必須讓每一個(gè)列表容器擁有一個(gè)“普照源”，通過(guò)子輩對(duì)父輩的counter-reset重置、配合counters()方法才能實(shí)現(xiàn)計(jì)數(shù)嵌套效果。

聞名不如見面。您可以狠狠地點(diǎn)擊這里：CSS計(jì)數(shù)器內(nèi)嵌demo

也會(huì)遇到這樣的麻煩&mdash;&mdash;“咦，怎么子序列不按層級(jí)順序來(lái)啊，命名語(yǔ)法正確?。俊?還是要記住這一句話：“一個(gè)容器里的普照源(reset)是唯一的”，所以，如果你不小心把計(jì)數(shù)顯示和技術(shù)reset元素以兄弟元素形式放在一起（雖然HTML內(nèi)容布局呈現(xiàn)是沒有異常的），就很可能會(huì)出現(xiàn)計(jì)數(shù)序號(hào)亂入的情況。

聞名不如見面。您可以狠狠地點(diǎn)擊這里：CSS計(jì)數(shù)器counters列表被reset亂入demo

會(huì)看到標(biāo)紅的部分的序號(hào)顯示異常了！

為何會(huì)出現(xiàn)這個(gè)問(wèn)題，我們看下HTML（主要是注釋）：

代碼如下:

<div class="reset">
   <div class="counter">我是王小二</div>
   <div class="reset"><-- 這里的reset與上面的counter是兄弟關(guān)系，而不是父子關(guān)系。雖然布局渲染上沒有差異。但是，一個(gè)容器的reset的唯一的，一旦子元素出現(xiàn)reset，會(huì)改變整個(gè)容器的嵌套關(guān)系，于是，后面的“王小三”、“王小四”其實(shí)已經(jīng)進(jìn)入了2級(jí)嵌套，因此顯示的是1-3和1-4 -->
       ...
   </div>
   <div class="counter">我是王小三</div>
   <div class="counter">我是王小四</div>
   <div class="reset">
       <div class="counter">我是王小四的大兒子</div>
   </div>
</div>

如果上面的注釋沒看明白，您可以跟前面沒有問(wèn)題的demo做下HTML結(jié)構(gòu)對(duì)比，或許就會(huì)豁然開朗！

⑤ counters()也是支持style自定義遞增形式的。

counters(name, string, style)

與counter()的style參數(shù)使用一致，不贅述。

四、CSS計(jì)數(shù)器與display:none挖挖挖

一個(gè)元素，如果設(shè)置了counter-increment, 但是其display的屬性值是none或者含有hidden屬性（針對(duì)支持瀏覽器），則此計(jì)數(shù)值是不會(huì)增加的。而visibility:hidden以及其他聲明不會(huì)有此現(xiàn)象。

五、CSS計(jì)數(shù)器實(shí)際應(yīng)用挖挖挖

相比傳統(tǒng)的ol,ul列表計(jì)數(shù)，CSS計(jì)數(shù)器的優(yōu)勢(shì)就在于靈活與強(qiáng)大，不足就是IE6/IE7不支持。

普照規(guī)則第一條，普照源唯一。所以，我們可以在頭尾放兩個(gè)差距甚遠(yuǎn)的列表，然后，這些列表自動(dòng)顯示序號(hào)。而ol/ul只能寫死start實(shí)現(xiàn)，很不靈活，一旦列表有刪減，就嗝屁了。

由于計(jì)數(shù)器是偽元素控制顯示的。因此，我們幾乎可以應(yīng)用各種CSS樣式，各種定位等。所以，基本上，只要有有序序號(hào)呈現(xiàn)的地方，就能使用CSS計(jì)數(shù)器。

例如，電商首頁(yè)的圖片slide廣告上的1,2,3,4,...序號(hào)；



我們做分享時(shí)候使用的HTML5 web在線幻燈片就可以使用CSS計(jì)數(shù)器標(biāo)注頁(yè)數(shù)等；以及一開始給小伙伴們做的果汁工具的3個(gè)選擇等。

我下筆之初本想搞幾個(gè)高保真的例子的，寫到這里發(fā)現(xiàn)，內(nèi)容已經(jīng)很多了。一篇技術(shù)文章，如果讀了2分鐘，發(fā)現(xiàn)才讀了一半，后面的內(nèi)容就會(huì)閃電過(guò)，然后會(huì)有些莫名的評(píng)論之類。因此，文章不易過(guò)長(zhǎng)。所以，這里就要收尾了！

感謝各位的閱讀，以上就是“CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前標(biāo)題：CSS計(jì)數(shù)器序列數(shù)字字符自動(dòng)遞增的方法教程
當(dāng)前URL：http://www.muchs.cn/article6/geeeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、外貿(mào)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)