要定義并使用css計數器，首先在父元素上用counter-reset初始化計數器，如section { counter-reset: section-number; }，然后在需要顯示編號的元素前使用counter-increment遞增計數器并用counter()函數展示，如h2::before { content: counter(section-number); counter-increment: section-number; }。此外，counter-reset還可用于重置計數器值，實現層級編號，如h1 { counter-reset: subsection; }，而counter-increment可指定遞增步長或同時遞增多個計數器，如li::before { counter-increment: list-item 2; } 或 counter-increment: section subsection;。若編號未生效，常見問題包括未正確初始化、拼寫錯誤、未調用counter()函數或受隱藏元素影響。掌握這些要點即可靈活實現自動編號功能。
counter-increment 和 counter-reset 是 css 中用于創建和操作計數器的兩個屬性，常用于自動編號，比如文章章節、列表項編號等。它們雖然不復雜，但用法靈活，掌握好可以省去不少手動寫編號的麻煩。
如何定義并使用一個計數器？
在 CSS 中使用計數器的第一步是定義它，通常是在某個父元素上使用 counter-reset 來初始化一個計數器。比如：
section { counter-reset: section-number; }
這表示在每個 section 元素下定義了一個名為 section-number 的計數器，并默認從 0 開始。
立即學習“前端免費學習筆記（深入）”；
然后，在需要顯示編號的地方（比如標題）使用 counter-increment 來遞增這個計數器：
h2::before { content: counter(section-number) ". "; counter-increment: section-number; }
這樣，每出現一個 h2 標題，section-number 就會加 1，并顯示出來。
counter-reset 不只是“開始”，還能控制層級
很多人以為 counter-reset 只是用來初始化一個計數器，其實它還可以用來重置計數器到某個值。例如：
.chapter { counter-reset: section-number 0; }
上面的寫法表示每次進入 .chapter 時，都把 section-number 重置為 0。
更常見的是嵌套結構中的使用場景。比如一級標題用 h1，二級標題用 h2，我們希望每個 h1 出現時，二級標題的計數重新開始：
h1 { counter-reset: subsection; } h1::before { content: counter(section) ". "; counter-increment: section; } h2::before { content: counter(section) "." counter(subsection) " "; counter-increment: subsection; }
這樣就能實現類似“1.1”、“1.2”、“2.1”這樣的編號效果。
counter-increment 可以指定遞增步長
默認情況下，counter-increment 每次增加 1，但你可以指定不同的步長：
li::before { content: counter(list-item) ". "; counter-increment: list-item 2; /* 每次加2 */ }
如果你有多個計數器，也可以一次遞增多個：
counter-increment: section subsection;
或者帶不同步長：
counter-increment: section 1 subsection 2;
這種靈活性使得你可以根據需求來定制各種編號邏輯。
常見問題：為什么編號沒變化？
有時候寫了代碼但編號沒有變化，可能有以下幾種原因：
- 忘記在父級設置 counter-reset，導致找不到計數器名。
- counter-increment 寫錯名字或拼寫錯誤。
- content 屬性中未調用 counter()。
- 使用了隱藏元素（如 display: none）影響了計數順序。
建議調試時先檢查這些點，尤其是計數器名稱是否一致，以及是否真的觸發了遞增。
基本上就這些，counter-increment 和 counter-reset 配合起來功能很強大，但也不復雜。關鍵是理解它們的作用機制和使用場景，一旦掌握，就能輕松實現自動編號、章節管理等功能。
