通常清單的計數器會按照預設格式產生對應的數值或符號，如果進一步透過「@counter-style」定義計數器規則，就能讓計數器產生更多變化，大幅增加計數器的彈性，這個單元會介紹「計數規則 @counter-style」以及各個描述子的用法。

影片重點：

• 00:01:09 認識 @counter-style
• 00:04:27 @counter-style 有哪些描述子
• 00:05:14 描述子 system
• 00:05:59 fixed 固定系統
• 00:07:47 cyclic 循環系統
• 00:08:34 numeric 數字系統、alphabetic 字母系統
• 00:11:40 symbolic 符號系統
• 00:13:10 additive 附加轉換系統
• 00:15:52 extends 擴展系統
• 00:17:40 描述子 symbols
• 00:18:45 描述子 additive-symbols
• 00:19:49 描述子 prefix、suffix
• 00:21:41 描述子 pad
• 00:23:06 描述子 negative
• 00:25:39 描述子 range、fallback
• 00:28:10 描述子 speak-as

相關參考：

• 教學文：CSS @counter-style 定義計數規則
• 影片連結：https://www.youtube.com/watch?v=db0h9t9bgzo

後記

印象中錄製這支影片搞了我好久，除了要介紹的內容很多，而且好像也不是很實用，錄製過程中因為範例很多，所以剪接過程也挺辛苦的，然後轉檔過程又發生字幕出狀況，弄得一個頭兩個大... 不過最後還是順利完成啦！

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html