CSS計數器是CSS的一種高級技巧，可以自動生成編號、字母或符號等樣式內容，是制作一些排版復雜的網站非常有用的工具。它可以自動為指定的元素和偽元素生成自定義的序號。

/* 定義計數器 */
body {
counter-reset: chapter; /* 定義一個名為chapter的計數器 */
}
/* 應用計數器 */
h2::before {
counter-increment: chapter; /* 將chapter計數器自增1 */
content: "Chapter " counter(chapter) ". "; /* 在偽元素前面顯示章節編號 */
}

在上面的代碼中，我們首先在body元素中定義了一個名為chapter的計數器，然后使用::before偽元素將它應用到了h2元素上。我們在h2::before中使用了counter-increment將chapter計數器自增1，在content屬性中使用了counter函數將計數器的值顯示在章節編號前面。通過這種方式，我們就可以自動為每個h2元素生成一個相應的章節編號。

除了chapter這個計數器，CSS還提供了很多內置的計數器，常用的有counter和page。我們也可以使用自定義的計數器，只需要在CSS中使用counter-reset定義一個新的計數器即可。

/* 定義自定義計數器 */
ol {
counter-reset: my-counter; /* 定義一個名為my-counter的計數器 */
}
/* 應用自定義計數器 */
li::before {
counter-increment: my-counter; /* 將my-counter計數器自增1 */
content: counter(my-counter) ". "; /* 在偽元素前面顯示自定義計數器的值 */
}

在上面的代碼中，我們定義了一個名為my-counter的自定義計數器，并將它應用到了ol元素中的li元素上。我們使用counter-increment將my-counter計數器自增1，在content屬性中使用counter函數將計數器的值顯示在li元素的文本前面。這樣就可以自動生成有序列表了。

總的來說，CSS計數器是一種很方便的技巧，可以幫助我們自動生成編號、字母或符號等樣式內容，使得排版更加便捷簡潔。