CSS計數器是一種用于生成序號或編號的CSS屬性。它能夠在網頁中創建一些有序列表，如章節編號，頁碼數組等等。

body {
counter-reset: section; /* 創建一個計數器，從0開始 */
}
h2::before {
counter-increment: section; /* 計數器的值自動增加1 */
content: "Section " counter(section) ": "; /* 在標題前面添加"Section X: " */
}
p::before {
content: counter(section) "." counter(subsection) " "; /* 在段落前添加"X.Y " */
}
ol li {
counter-increment: my-counter; /* 創建另一個計數器，從1開始 */
}
ol li::before {
content: counter(my-counter) ". "; /* 添加"1. "，"2. "，"3. "等序號 */
}

這個計數器屬性可以繼承。例如，如果在 body 中重置了計數器，那么子元素就可以繼承這個計數器的新值。如果子元素也重置了計數器，那么它就可以使用自己的計數器，而不會改變父元素的計數器。

body {
counter-reset: my-counter;
}
.main {
counter-reset: my-counter 10;
}
.sub {
counter-reset: my-counter;
}

在這個例子中，body 中的計數器被重置為0。然后，.main 中的計數器被重置為10。最后，.sub 中的計數器被重置為0。如果在 .sub 中使用 my-counter，則它將使用在 body 定義的 my-counter。