CSS計(jì)數(shù)器counter的使用技巧
這篇文章主要介紹“CSS計(jì)數(shù)器counter的使用技巧”，在日常操作中，相信很多人在CSS計(jì)數(shù)器counter的使用技巧問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS計(jì)數(shù)器counter的使用技巧”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
為金平等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及金平網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、金平網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
初始化CSS計(jì)數(shù)器
為了好理解，我們使用<OL> 和 <LI> 元素來做演示。首先我們要重置計(jì)數(shù)器，讓它歸零，并給它指定一個(gè)名稱：
CSS Code復(fù)制內(nèi)容到剪貼板
ol.slides {
countercounter-reset: slideNum;
}
這個(gè)計(jì)數(shù)器叫slideNum，下面的例子都都要使用它。
CSS計(jì)數(shù)器的自增
為了是計(jì)數(shù)器能夠自增，我們需要使用counter-increment，并把計(jì)數(shù)器的名稱跟到后面：
CSS Code復(fù)制內(nèi)容到剪貼板
ol.slides > li {
countercounter-increment: slideNum;
}
這樣，在CSS選擇器下，每遇到一個(gè)符合條件li元素，counter-increment就會(huì)被調(diào)用一次，計(jì)數(shù)就是增加1。需要注意的是，這里的CSS選擇器里使用了>符號(hào)，這樣是為了濾掉有可能多重嵌套的li元素。否者你的計(jì)數(shù)值就會(huì)不是你想要的。
使用計(jì)數(shù)值
如果只計(jì)數(shù)而無法顯示，那這個(gè)計(jì)數(shù)器也沒多大用處，所以就有了counter()命令來輸出計(jì)數(shù)器里的值，可以用在content屬性里：
CSS Code復(fù)制內(nèi)容到剪貼板
ol.slides li:after {
content: "[" counter(slideNum) "]";
}
有趣的是，這個(gè)counter()命令還可以接受第二個(gè)參數(shù)，當(dāng)作同時(shí)計(jì)算多個(gè)元素時(shí)數(shù)據(jù)的分隔符：
假設(shè)有這樣的HTML:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<ol class="toc">
<li>Intro</li>
<li>Topic
<ol>
<li>Subtopic</li>
<li>Subtopic</li>
<li>Subtopic</li>
</ol>
</li>
<li>Topic
<ol>
<li>Subtopic</li>
<li>Subtopic</li>
<li>Subtopic</li>
</ol>
</li>
<li>Closing</li>
</ol>
我們這樣來寫：
CSS Code復(fù)制內(nèi)容到剪貼板
ol.toc, ol.toc ol {
countercounter-reset: toc;
}
ol li {
countercounter-increment: toc;
}
.toc li:before {
content: "(Item " counters(toc, ".") ")";
}
會(huì)輸出下面的結(jié)果
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<ol class="toc">
<li>(Item 1)Intro</li>
<li>(Item 2)Topic
<ol>
<li>(Item 2.1)Subtopic</li>
<li>(Item 2.2)Subtopic</li>
<li>(Item 2.3)Subtopic</li>
</ol>
</li>
<li>(Item 3)Topic
<ol>
<li>(Item 3.1)Subtopic</li>
<li>(Item 3.2)Subtopic</li>
<li>(Item 3.3)Subtopic</li>
</ol>
</li>
<li>(Item 4)Closing</li>
</ol>
你可以發(fā)現(xiàn)，當(dāng)需要顯示這種聯(lián)級(jí)嵌套序號(hào)時(shí)，這種技術(shù)是非常的有用的。很像微軟WORD里面文檔的多重序號(hào)。
在 counter-reset 屬性中，定義了一個(gè)隨機(jī) ID，其默認(rèn)值是0。你可以在 counter-increment 屬性中定義另外一個(gè)數(shù)字，作為計(jì)數(shù)的步長(zhǎng)。
例如：counter-increment: i 2 將值顯示偶數(shù)。
大多時(shí)候，CSS計(jì)數(shù)器都是配合:after和:before偽元素使用，我曾看到過有人在幻燈片、視頻頁(yè)面和文檔里用過CSS計(jì)數(shù)器。相信你會(huì)找到其它可以使用它的地方。
CSS 計(jì)數(shù)器進(jìn)階
利用 CSS 計(jì)數(shù)器，能統(tǒng)計(jì)被用戶選擇的復(fù)選框個(gè)數(shù)：
CSS Code復(fù)制內(nèi)容到剪貼板
<div class="languages">
<input id="c" type="checkbox"><label for="c">C</label>
<input id="C++" type="checkbox"><label for="C++">C++</label>
<input id="C#" type="checkbox"><label for="C#">C#</label>
<input id="Java" type="checkbox"><label for="Java">Java</label>
<input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
<input id="PHP" type="checkbox"><label for="PHP">PHP</label>
<input id="Python" type="checkbox"><label for="Python">Python</label>
<input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>
<p class="total">
Total selected:
</p>
.languages {
countercounter-reset: characters;
}
input:checked {
countercounter-increment: characters;
}
.total:after {
content: counter(characters);
}
在這個(gè)示例中，我們會(huì)增加 input:checked 的數(shù)量并打印出來。
你還能創(chuàng)建一個(gè)小型計(jì)算器：
CSS Code復(fù)制內(nèi)容到剪貼板
<div class="numbers">
<input id="one" type="checkbox"><label for="one">1</label>
<input id="two" type="checkbox"><label for="two">2</label>
<input id="three" type="checkbox"><label for="three">3</label>
<input id="four" type="checkbox"><label for="four">4</label>
<input id="five" type="checkbox"><label for="five">5</label>
<input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>
<p class="sum">
Sum
</p>
.numbers {
countercounter-reset: sum;
}
#one:checked { countercounter-increment: sum 1; }
#two:checked { countercounter-increment: sum 2; }
#three:checked { countercounter-increment: sum 3; }
#four:checked { countercounter-increment: sum 4; }
#five:checked { countercounter-increment: sum 5; }
#one-hundred:checked { countercounter-increment: sum 100; }
.sum::after {
content: '= ' counter(sum);
}
到此，關(guān)于“CSS計(jì)數(shù)器counter的使用技巧”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
分享題目：CSS計(jì)數(shù)器counter的使用技巧
新聞來源：http://muchs.cn/article8/pissop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、定制開發(fā)、App開發(fā)、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、品牌網(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í)需注明來源： 創(chuàng)新互聯(lián)
- 香港云服務(wù)器做網(wǎng)站可以嗎？ 2022-10-10
- windows云服務(wù)器使用有哪些注意事項(xiàng) 2022-10-04
- 選擇云服務(wù)器的一些優(yōu)勢(shì) 2021-03-04
- 服務(wù)器和云服務(wù)器的優(yōu)缺點(diǎn) 2021-02-24
- 云服務(wù)器已經(jīng)成為趨勢(shì)？看看企業(yè)該如何應(yīng)對(duì) 2022-10-02
- 云服務(wù)器與虛擬主機(jī)區(qū)別是什么 2021-03-07
- 網(wǎng)站建設(shè)小技巧-怎么選擇購(gòu)買合適的云服務(wù)器？ 2021-01-28
- 云服務(wù)器是什么？有什么作用？ 2021-02-11
- 電商網(wǎng)站選擇云服務(wù)器要考慮哪些方面 2022-10-02
- 云服務(wù)器已經(jīng)成為服務(wù)器選購(gòu)的新趨勢(shì) 2022-10-04
- 網(wǎng)站空間虛擬主機(jī)空間虛擬主機(jī)配置域名注冊(cè)云服務(wù)器 2016-11-05
- 服務(wù)器之家淺談云服務(wù)器和物理服務(wù)器在成本上的差別 2022-10-04