counter()

counter 返回一個(gè)代表計(jì)數(shù)器當(dāng)前值的字符串。接收兩個(gè)參數(shù)，一個(gè)名稱，一個(gè)計(jì)數(shù)樣式。counter(name,styleName),name 區(qū)分大小寫，作為代表當(dāng)前計(jì)數(shù)器的名稱標(biāo)識。styleName 參數(shù)是可選的，代表遞增數(shù)字或者字母的種類，可接受的參數(shù)為 list-style-type 所支持的種類。常用的有以下這些:

• disc （實(shí)心圓點(diǎn)）

• circle （空心圓點(diǎn)）

• square （實(shí)心方塊）

• decimal （阿拉伯?dāng)?shù)字 12345...）

• lower-roman（羅馬數(shù)字 i, ii, iii...）

• upper-roman (羅馬數(shù)字 I, II, III, IV...)

• simp-chinese-informal (中文計(jì)數(shù) 一、二、三、....九十九、)

• simp-chinese-formal （中文繁體 壹貳叁肆伍...）

• lower-latin (小寫字母 abcd...)

• upper-latin (大寫字母 ABCD....)

• ...

更多信息以及兼容性可看 MDN list-style-type

與計(jì)數(shù)器利益相關(guān)的還有兩個(gè)屬性值：

• counter-reset

• counter-increment

counter-reset,counter-increment

counter-reset 用于重置 CSS 計(jì)數(shù)器，重置內(nèi)容包括名稱，初始數(shù)字。例子：

效果

兼容性

基本都支持

counters()

counters()是一個(gè)嵌套計(jì)數(shù)器，用于定義嵌套計(jì)數(shù)器的連接字符.counters(counterName,string,styleName),接收 3 個(gè)參數(shù) counterName,string,styleName.其中第三個(gè)參數(shù)是可選的。看栗子

效果

列表元素用 counters 定義相互之間的計(jì)數(shù)連接規(guī)則，可以很方便模擬有序列表。

兼容性

兼容性跟 counter 一樣

總結(jié)

counter 類比 ol,ul，在樣式的把握上，會更加靈活，設(shè)置樣式也更加隨心所欲。對于有列表相關(guān)樣式優(yōu)化的項(xiàng)目，可以考慮使用 counter(),counters()來優(yōu)化。兼容性也不錯(cuò)。

了解更多，請點(diǎn)擊：https://www.bilibili.com/video/BV14h411f78E

作者：Kerinlin
鏈接：https://juejin.cn/post/6909709349183029256
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。