0x00 簡介
@counter-style是一個 CSS at-rule ，它讓開發者可以自定義counter的樣式。
一個 @counter-style規則 定義瞭如何把一個計數器的值轉化爲字符串表示。
0x01 語法
@counter-style <counter-style-name> {
system: <counter system>
symbols: <counter symbols>
additive-symbols: <additive-symbols>
negative: <negative symbol>
prefix: <prefix>
suffix: <suffix>
range: <range>
pad: <padding>
speak-as: <speak-as>
fallback: <counter-style-name>
}
0x02 描述符
每個 @counter-style 由一個名稱標識並具有一組描述符
指定一個算法，用於將計數器的整數值轉化爲字符串表示。
指定一個符號，當計數器表示的值爲負的時候，把這個符號加在值的前面或後面
指定一個符號，加在標記表示符的前面。前綴在最後階段纔會被加上，所以在計數器的最終表示中，它在negative前。
與prefix類似，suffix指定一個符號，加在標記表示符的後面。
指定一個counter-style生效的範圍，如果計數器的值不再這個範圍內，那麼自定義的counter-style不會生效，counter-style會後退到fallback的style。
在你想要給標記表示符最小值時使用。比如說，你想要計數器從01開始，經過02，03，04，那麼這時可以使用pad了。對於大於pad指定值的表示符，標記會恢復爲normal。
定義一個備用的系統，當自定義的系統不能使用或者計數器的值超過了定義的範圍時使用。如果備用系統也不能表示計數器的值，那麼備用系統的備用系統（如果有的話）將會啓用。如果沒有指定備用系統，或者備用系統鏈不能夠正確表示一個值，那麼最終會降爲十進制樣式表示。
定義一個符號，用於標記的表示。符號可以包含字符串，圖片或自定義的識別碼。這個符號怎樣構建標記呢？這依賴於system描述符裏面所定義的算法。 舉個例子，如果system的值是fixed,那麼symbols屬性指定的固定的N個符號，將被用來表示計數器的前N個值。用完了前N個符號後，列表裏剩下的值將使用fallback定義的樣式來表示。
儘管symbols屬性中指定的符號可以被system中定義的大部分算法所使用，但是一些system屬性的值，比如additive，依賴於本描述符所描述的加性元組。Each additive tuple consists of a counter symbol and a non negative integer weight. 每個加性元組包含一個可數的符號和一個非負證書的權重。The additive tuples must be specified in the descending order of their weights.
定義如何在語音識別器中讀出計數器樣式，比如屏幕閱讀器。例如基於該描述符的值，標記符號的值可以作爲有序列表的數字或者字幕作爲無序列表的音頻提示讀出。
0x03 system
cyclic：循環使用符號 例：system: cyclic; symbols:'a' 'b' 'c'; a,b,c,a,b,c
fixed：只用一遍符號，數字表示開始使用的位置 例：system: fixed 2; symbols:'a' 'b' 'c' 'd'; 1,a,b,c,d,6,7
symbolic：循環使用符號，第二遍雙倍使用 例：system:symbolic; symbols:'a' 'b' 'c'; a,b,c,aa,bb,cc
alphabetic：字母循環 例: system:alphabetic; symbols:'a' 'b' 'c'; a,b,c,aa,ab,ac,ba,bb,bc,ca
0x04 例子
css代碼
@counter-style circled-alpha {
system:fixed;
symbols:"\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
/* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
suffix:" ";
}
ul li{
list-style:circled-alpha;
}
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fundamental CSS comprehension</title>
<link rel="stylesheet" type="text/css" href="4.css">
</head>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
</html>
效果如下
