前言
博客原文查看可點(diǎn)擊《CSS counter屬性》哦岗照！
本文引用張?chǎng)涡翊蟠蟛┛臀恼隆禖SS counter計(jì)數(shù)器(content目錄序號(hào)自動(dòng)遞增)詳解》，一直覺(jué)得鑫大大是個(gè)被程序員耽誤的小說(shuō)家温艇，他的文章風(fēng)格大都以淺明深，詼諧幽默堕汞，可點(diǎn)擊這里查看原文哦勺爱。
好了，It's my show time!
在了解到counter之前讯检，想到計(jì)數(shù)應(yīng)該屬ul琐鲁，ol標(biāo)簽元素了吧，但它們的遞增規(guī)則單一人灼，無(wú)法實(shí)現(xiàn)自定義的遞增围段。而counter屬性完美的解決了這個(gè)問(wèn)題，讓我們一起來(lái)看看吧投放。
首先奈泪，使用一個(gè)屬性前，我們一定得了解一下它的兼容性，曾經(jīng)被IE兼容性虐哭的我段磨，不得不小心作為一個(gè)好用屬性的兼容問(wèn)題取逾。
兼容性
| ?I?E?? | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 8.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
??看到這里是不是心里放松了很多耗绿，它的兼容性還是可以的接受的苹支，范圍不算局限。
counter的使用題要
CSS計(jì)數(shù)器只能跟content屬性在一起的時(shí)候才有作用误阻，而content屬性貌似專門用在before/after偽元素上的债蜜。于是，就有了究反，“計(jì)數(shù)器?偽元素?content屬性”的鐵三角關(guān)系
counter成員
counter的成員主要有三個(gè)：
- counter-reset（計(jì)數(shù)器聲明及初始值設(shè)置）
- counter-increment（遞增規(guī)則）
- counter()/counters(計(jì)算結(jié)果生成)
counter-reset
counter-reset主要有三個(gè)屬性寻定。
-
none：默認(rèn)。不能對(duì)選擇器的計(jì)數(shù)器進(jìn)行重置精耐。 -
name num：name即標(biāo)記計(jì)數(shù)器名稱狼速，num即記錄計(jì)數(shù)器初始值。num非必寫卦停，默認(rèn)為0向胡。 -
inherit：規(guī)定應(yīng)該從父元素繼承 counter-reset 屬性的值。
counter-increment
counter-increment主要有三個(gè)屬性惊完。
-
none：沒(méi)有計(jì)數(shù)器將遞增僵芹。 -
name num：name即選擇遞增的計(jì)數(shù)器，num即增量小槐。num非必寫拇派，默認(rèn)為1，可以是正數(shù)凿跳、零或者負(fù)數(shù)件豌。 -
inherit：指定counter-increment屬性的值，應(yīng)該從父元素繼承控嗜。
counter()/counters()
這是個(gè)方法苟径，不是屬性。類似CSS3中才calc()計(jì)算躬审。
-
name：選擇遞增的計(jì)數(shù)器棘街。 -
style：遞增的數(shù)字樣式：阿拉伯?dāng)?shù)字，羅馬數(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
-
string：counters的屬性遭殉，子序數(shù)連接符
<font color="#a00">注：</font>多個(gè)計(jì)數(shù)器還可同時(shí)命名，接下來(lái)我們上代碼看幾個(gè)例子博助。
CSS：
1. counter-reset屬性
.xxx {
counter-reset: count; /* 計(jì)數(shù)器名稱是'count', 并且默認(rèn)起始值為0 */
}
.xxx {
counter-reset: count 4; /* 計(jì)數(shù)器名稱是'count', 并且默認(rèn)起始值為4 */
}
.xxx {
counter-reset: count1 2 count2 3; /* 定義兩個(gè)計(jì)數(shù)器'count1'和'count2',默認(rèn)起始值分別為2和3 */
}
2. counter-increment屬性
.counter {
counter-increment: count 2; /*'count'以2階段遞增 */
}
.counter {
counter-increment: count -1; /*'count'以1階段遞減 */
}
3. counter方法
counters(name, style);
.counter:before {
content: counter(count1) '\A' counter(count2); /*'\A'使用inline水平元素?fù)Q行*/
white-space: pre;
}
??接下來(lái)看一個(gè)完整的例子险污。
效果如圖：
<div class="box">
<div class="list">一級(jí)標(biāo)題
<div class="box">
<div class="list">二級(jí)標(biāo)題</div>
<div class="list">二級(jí)標(biāo)題</div>
<div class="list">二級(jí)標(biāo)題</div>
</div>
<div class="box">
<div class="list">二級(jí)標(biāo)題
<div class="box">
<div class="list">三級(jí)標(biāo)題</div>
<div class="list">三級(jí)標(biāo)題</div>
<div class="list">三級(jí)標(biāo)題</div>
</div>
</div>
</div>
<div class="box"></div>
</div>
<div>
<div class="list">一級(jí)標(biāo)題<div>
</div>
<style>
.box {
counter-reset: counter;
}
.toper, .inner {
background-color: #eee;
margin-left: 20px;
}
.list:before,
.toper:before,
.inner:before {
counter-increment: counter;
}
.list {
padding-left: 20px;
}
.inner:before,
.list:before,
.toper:before {
content: counters(counter,'.')'、';
}
</style>
OK至此，關(guān)于counter的介紹就差不多結(jié)束了蛔糯，可以在實(shí)踐過(guò)程中發(fā)現(xiàn)和挖掘更有意思的操作拯腮，如果你有什么有趣的神操作，可以給我留言分享哦蚁飒！啦啦啦
