什么是CSS計數器？

CSS計數器是一種功能強大的CSS特性，它是一種由CSS定義和管理的計數器，可以用來對文本內容進行編號、自動標記，使頁面更加美觀、易讀。

CSS計數器的使用方法：

1.定義計數器：

/* 在父級元素中定義計數器名稱和起始值 */
.parent {
counter-reset: counterName 0;
}

2.計數器值加一：

/* 在每個子元素中加一 */
.child:before {
counter-increment: counterName;
content: counter(counterName) ".";
}

3.利用計數器實現一些功能：

/* 利用計數器自動添加編號 */
ul {
counter-reset: li; /* 重置計數器的名稱 */
}
li:before {
counter-increment: li; /* 計數器加一 */
content: counter(li) ". "; /* 在每個li前面添加計數器的值和一個點 */
}

CSS計數器的應用場景：

從HTML的角度來看，CSS計數器看起來會比較麻煩，但在某些場景下非常有用，如制作復雜的列表、圖形、章節標題等。通過使用CSS計數器，可以大大減少代碼的復雜度和冗余度，提高代碼的可維護性和靈活性。