前言
前端頁(yè)面上的計(jì)數(shù)排列一般比較常見(jiàn)的結(jié)構(gòu)就兩種：
圖片左邊的結(jié)構(gòu)是一個(gè)導(dǎo)航目錄寇仓，圖片右邊的結(jié)構(gòu)一般可作為電商幻燈片的導(dǎo)航举户。在 HTML 層面我們實(shí)現(xiàn)這種效果一般使用
ul 或 ol。當(dāng)然你也可以使用別的標(biāo)簽來(lái)實(shí)現(xiàn)遍烦。HTML 的 ul 和 ol 作為序列使用是非常好用的俭嘁，唯一的遺憾就是序列號(hào)可用性比較差，雖然提供了 list-style-image服猪。要想使用 ol 來(lái)實(shí)現(xiàn)前面帶 1.1 的這種目錄結(jié)構(gòu)供填，還是比較難的。
這時(shí)候該是 css 計(jì)數(shù)器 counter 出場(chǎng)了罢猪。
API 介紹
css 計(jì)數(shù)器一共涉及近她，兩個(gè)屬性一個(gè)方法，如下：
- counter-reset
功能是可以創(chuàng)建計(jì)數(shù)器即是給計(jì)數(shù)器命名的膳帕，也可以重置計(jì)數(shù)器粘捎。默認(rèn)是 0。
.xxx{counter-reset: name;}/*創(chuàng)建一個(gè)為name的計(jì)數(shù)器危彩，默認(rèn)從0開(kāi)始計(jì)數(shù)*/
.xxx{counter-reset: name 10;}/*創(chuàng)建一個(gè)為name的計(jì)數(shù)器攒磨，默認(rèn)從10開(kāi)始計(jì)數(shù)*/
多個(gè)計(jì)數(shù)器還可以這樣寫(xiě)：
.xxx { counter-reset: name 1 name 2; }
另外，counter-reset 還可以設(shè)置為 none 和 inherit. 干掉重置以及繼承重置汤徽。
- counter-increment
遞增/遞減變量娩缰，計(jì)數(shù)器的增量/減量，1 個(gè)或多個(gè)關(guān)鍵字谒府。后面如果跟隨數(shù)字拼坎，表示每次計(jì)數(shù)的變化值浮毯。如果缺省，則使用默認(rèn)增值 1泰鸡。
.xxx{counter-increment: name;}/*name計(jì)數(shù)器每次增加1*/
.xxx{counter-increment: name 10;}/*name計(jì)數(shù)器每次增加10*/
.xxx{counter-increment: name -10;}/*name計(jì)數(shù)器每次減少10遞減效果*/
- counter()/counters()
將計(jì)數(shù)器的值添加到元素债蓝。計(jì)數(shù)的結(jié)果將通過(guò)counter()/counters()展示出來(lái)。
counter(name)/*把叫name的計(jì)數(shù)器展示出來(lái)鸟顺，格式為1惦蚊、2、3......*/
還有一種用法：
counter(name,style)
name 就是計(jì)數(shù)器的名字讯嫂，style 是什么？默認(rèn)遞增遞減是數(shù)字兆沙，style 就是用來(lái)自定義遞增遞減不是數(shù)字欧芽，例如可以是 a、b葛圃、c千扔。 其支持的關(guān)鍵字值和 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
一個(gè)content屬性值還可以有多個(gè)counter()方法库正。
一個(gè)簡(jiǎn)單的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html{
background-color: #ffc9eb;
}
div{
counter-reset: name;
}
p{
counter-increment: name;
}
p::after{
content: counter(name);
}
</style>
</head>
<body>
<div>
<p>section</p>
</div>
</body>
</html>
看 section 后面是不是多了個(gè) 1曲楚？
代碼解析：
- 通過(guò)
counter-reset命名一個(gè)計(jì)數(shù)器叫name，默認(rèn)重 0 開(kāi)始褥符。 - 計(jì)數(shù)器在 div 標(biāo)簽上龙誊，它會(huì)照耀所有的子孫，計(jì)數(shù)器的遞增在 p 標(biāo)簽上面默認(rèn)增量為 1喷楣，標(biāo)簽展示的時(shí)候只要通過(guò) p 就會(huì)增加 1趟大。
- 計(jì)數(shù)器的展示，通過(guò)偽元素 (before 和 after) 里面的 content 配合 counter 或 counters铣焊。
下面講一下最難得增量 counter-increment 逊朽，因其放的位置不同會(huì)引發(fā)不同的遞增遞減效果。
counter-increment 的位置
counter-increment 負(fù)責(zé)自增曲伊，只要其位置在 counter-reset 和 counter/counters 之間叽讳，展示時(shí)就會(huì)有增加的效果，計(jì)數(shù)器的解析規(guī)則和 HTML 的解析規(guī)則相同坟募。所以 counter-increment 達(dá)到增加一次的效果岛蚤，針對(duì)案例可以寫(xiě)的幾種方式為：
第一種：寫(xiě)在計(jì)數(shù)器定義和展示的中間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS計(jì)數(shù)器</title>
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name 9;
}
.increment{
counter-increment: name;
}
p::after{
content: counter(name);
}
</style>
</head>
<body>
<div class="reset">
<div class="increment">自增
<p>我后面是一個(gè)</p>
</div>
</div>
</body>
</html>
第二種：寫(xiě)在計(jì)數(shù)器定義的位置
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name 9;
counter-increment: name;
}
p::after{
content: counter(name);
}
</style>
第三種：寫(xiě)在計(jì)數(shù)器展示的位置
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name 9;
}
p::after{
counter-increment: name;
content: counter(name);
}
</style>
猜猜下面 h1 標(biāo)簽的偽類應(yīng)該顯示什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS計(jì)數(shù)器</title>
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name 10;
}
.increment{
counter-increment: name 5;
}
h1::after,p::after{
content: counter(name);
}
</style>
</head>
<body>
<div class="reset">
<div class="increment">自增
<p>我后面是一個(gè)</p>
</div>
<h1>猜猜我的結(jié)果</h1>
</div>
</body>
</html>
p 標(biāo)簽后面是 15婿屹，是沒(méi)有問(wèn)題的灭美，h1 后面也是 15。不知道你猜對(duì)了沒(méi)昂利？根據(jù) HTML 解析規(guī)則和計(jì)數(shù)器使用規(guī)則届腐，到 p 標(biāo)簽的時(shí)候是 15 铁坎，h1 顯示的又是相同的計(jì)數(shù)器，所以 h1 和 p 計(jì)數(shù)相等犁苏。
針對(duì)上面代碼硬萍，我們不動(dòng) HTML 里面的，只更改 CSS 里面的代碼围详，改成如下代碼所示朴乖，再次猜猜看：
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name 10;
counter-increment: name 5;
}
.increment{
counter-increment: name 5;
}
h1::after,p::after{
counter-increment: name 5;
content: counter(name);
}
</style>
是不是很簡(jiǎn)單計(jì)數(shù)器的數(shù)值變化遵循 HTML 渲染順序，遇到一個(gè) increment 計(jì)數(shù)器就變化助赞，什么時(shí)候 counter 輸出就輸出此時(shí)的計(jì)數(shù)值买羞。
counters() 這個(gè)方法還是要說(shuō)下的。雖然和 counter 相比就多了個(gè)字母 s, 但兩者的功能還是有很大的不同雹食。counters 可以理解為嵌套計(jì)數(shù)畜普。
我們平時(shí)的序號(hào)，不可能就只是1,2,3,4,.., 還會(huì)有諸如 1.1,1.2,1.3,...等的子序號(hào)群叶。前者就是counter()干的事情吃挑，后者就是counters()干的事情。
counters 的用法：
counters(name, string, style)
name 就是計(jì)數(shù)器的名字街立，string 表示子序號(hào)的連接字符串舶衬。例如 1.1 的 string 就是'.', 1-1就是 '-'。style 與 counter() 的 style 參數(shù)使用一致赎离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS計(jì)數(shù)器</title>
<style>
html{
background-color: pink;
}
.reset{
counter-reset: name;
}
.item{
text-indent: 2em;
}
.d2{
text-indent: 4em;
}
.d3{
text-indent: 6em;
}
.item::before{
counter-increment: name;
content:counters(name,"-") '. ';
}
</style>
</head>
<body>
<div class="reset">
<div class="content">目錄</div>
<div class="item">
術(shù)語(yǔ)
<div class="reset">
<div class="item d2">docker client</div>
<div class="item d2">docker host</div>
<div class="item d2">docker daemon</div>
<div class="item d2">container</div>
<div class="item d2">registry</div>
</div>
</div>
<div class="item">
安裝 docker
<div class="reset">
<div class="item d2">
守護(hù)進(jìn)程配置
</div>
</div>
</div>
<div class="item">
底層原理
<div class="reset">
<div class="item d2">
namespace
<div class="reset">
<div class="item d3">pid: 隔離進(jìn)程</div>
<div class="item d3">net: 隔離網(wǎng)絡(luò)</div>
<div class="item d3">ipc: 隔離 IPC</div>
<div class="item d3">mnt: 隔離文件系統(tǒng)掛載</div>
<div class="item d3">uts: 隔離hostname</div>
<div class="item d3">user: 隔離uid/gid</div>
</div>
</div>
<div class="item d2">control groups</div>
<div class="item d2">union file system</div>
</div>
</div>
<div class="item">
鏡像
<div class="reset">
<div class="item d2">鏡像倉(cāng)庫(kù)與拉取</div>
<div class="item d2">構(gòu)建鏡像與發(fā)布</div>
</div>
</div>
<div class="item">
Dockerfile
<div class="reset">
<div class="item d2">FROM</div>
<div class="item d2">ADD</div>
<div class="item d2">COPY</div>
<div class="item d2">CMD</div>
<div class="item d2">ENTRYPOINT</div>
</div>
</div>
<div class="item">
容器
<div class="reset">
<div class="item d2">創(chuàng)建容器</div>
<div class="item d2">容器管理</div>
</div>
</div>
</div>
</body>
</html>
代碼測(cè)試結(jié)果：
最后注意：
一個(gè)元素逛犹，如果設(shè)置了 counter-increment 屬性, 這個(gè)元素還設(shè)置了
display:none或在標(biāo)簽上直接設(shè)置 hidden 屬性 （<span hidde></span>）計(jì)數(shù)在此元素上失效。
感興趣的還可以研究下下面這個(gè)案例蟹瘾，沒(méi)寫(xiě) JS 代碼但是是動(dòng)態(tài)的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS計(jì)數(shù)器</title>
<style>
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
</style>
</head>
<body>
<strong>下面中國(guó)十大冰淇淋你吃過(guò)幾個(gè)圾浅？</strong>
<ol>
<li><input type="checkbox" id="icecream1"><label for="icecream1">哈根達(dá)斯</label></li>
<li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
<li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
<li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
<li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
<li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
<li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>
<li><input type="checkbox" id="icecream8"><label for="icecream8">樂(lè)可可冰淇淋</label></li>
<li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
<li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
</ol>
你總共選擇了 <strong class="total"></strong> 款冰淇淋！
</body>
</html>
還可以使用 CSS 計(jì)數(shù)器實(shí)現(xiàn)數(shù)值計(jì)算小游戲
