CSS計數器是CSS一個很有意思的特性，很適合底層的CSS開發人員使用。它經常用于必須根據頁面布局算出序列的樣式。

ol {
counter-reset: section;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". ";
}

上述代碼展示了如何使用CSS計數器來為有序列表的每個列表項設置數字。按照上面的示例，我們可以將CSS計數器設置為“section”。

當對于列表項中的每個元素使用counter-increment屬性時，計數器的值將增加1。

最后我們使用counters函數在每個列表項前面添加序號。

content: counters(section, ".") ". ";

使用CSS計數器時，我們必須記住的一個重要性質是，它們將在每個文檔流的開始時被重置為默認值。我們可以使用counter-reset屬性來自定義這個默認值，示例中的代碼將默認值設置為“section”。

除了在有序列表中使用之外，CSS計數器還可以用于其他地方，例如章節標題，圖表，表格行等等。

總之，CSS計數器在CSS開發中是一個非常有用的特性，可幫助我們輕松地創建序號并通過CSS樣式將其應用于需要序號的不同元素，這有助于有效的網頁排版以及更合理的呈現方式。