前言
不知道有多少人做過自己的博客，在生成文章目錄的時候，有沒有人是下圖樣式的：
會在標題前面加上數字編號的，大部分的實作方案是什么呢？我一開始是在遍歷的時候加上數字編號的，不過這樣的JS代碼很多，需要判斷層級數很麻煩，直到我發現純css的counter屬性！
計數器
CSS的計數器通過在 content 上應用 counter() 或 counters()函式來顯示計數的，其中計數器是由counter-reset和counter-increment 來進行操作的，
counter-increment
語法
counter-increment: 計數器名稱 數字值 可選值；
數字值：默認就是初始值（當你不使用counter-reset），并且表示步長，
可選值:none，
可以定義多個計數器，
單個計數器
p{
counter-increment: myCounter 1;
}
p::before{
content: counter(myCounter);
}
多個計數器
p{
counter-increment: myCounter 1 mycount2 2;
}
當然樣式比較奇怪，你可以對p::before進行改造，
比如說這樣：
同屬于一個父元素才會累計
p {
counter-increment: myCounter 1 mycount2 2;
}
<div>
<p>span1</p>
<p>span1</p>
</div>
<div>
<p>span21</p>
<p>span21</p>
</div>
如圖所示:p標簽所屬在兩個div標簽，計數會重新開始，
counter-reset
重置計數器，
語法：
counter-reset: 計數器的名字 數字值；
計數器的名字必須和counter-increment定義的一致，
數字值：初始值重置，剛才我們在介紹counter-increment的數字值的時候，有這樣一句話：
計數器的初始值就變成了：reset的數字值+increment的數字值，，步長仍然是increment的數字值，
同樣的reset可以同時重置多個計數器，
重置單個計數器
body {
counter-reset: myCounter 2;
}
p {
counter-increment: myCounter 2;
}
這里我們在body重置計數器，在p中定義這個計數器的步長，
最后的效果就是初始值為2+2 步長為2
必須在counter-increment之前，
這是啥意思呢？
span {
counter-reset: myCounter 2;
}
p {
counter-increment: myCounter 2;
}
<div>
<p>span1<span>在p里面</span></p>
</div>
通過這張圖可以看到，span標簽是在p里面的我們把reset放在了span上，reset就無法生效，
reset和increment不要放在同一個標簽
例如這樣寫，會導致什么效果呢，大家可以想一想
p {
counter-increment: myCounter 2;
counter-reset: myCounter 2;
}
其實結果就是每個span都是4，因為每一個p在生成的時候，計數器都會重置為2.
所以筆者建議：
reset放在父元素increment放在當前元素
或者 reset放在當前元素increment放在:before或者:after元素.
counter
使用計數器，并定義計數器的計數器樣式，
語法：
counter(計數器名稱，計數器樣式)
計數器樣式 比如；
upper-roman：I, II, III, IV, V…
lower-greek：α, β, γ…
lower-alpha： a, b, c, … z
可以使用的字符你可以查看下面的鏈接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type
當然你也可以使用@counter-style 進行自定義，
舉例
p::before {
content: counter(myCounter,armenian) ' ' ' ';
}
counters()
counters 與counter的區別是啥，就是一個s，這個s就代表著counters是為嵌套計數而生的，
語法：
counters(計數器名, 嵌套樣式, 計數器樣式 )
還記得這個圖吧，我們就來實作它，
首先是有兩層，每一層都是從1開始的，
ol{
counter-reset: myCounter 0;
list-style-type: none;
}
li::before {
counter-increment: myCounter 1;
content: counters(myCounter,'.') ' '' ';
}
<ol>
<li>counter是什么</li>
<li>counter的使用步驟
<ol style="padding-left:20px">
<li>引入</li>
<li>撰寫</li>
</ol>
</li>
</ol>
這里我們使用了ol和li,首先我們是在ol上reset的，所以每次遇到ol計數器都會重置，保證了每層都是從1開始，同時counters(myCounter,’.’) 定義了使用 . 來進行嵌套，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317992.html
標籤：其他