在CSS中，我們可以通過計數器來自動生成項目編號和標題序號。這個功能在制作列表和目錄時非常方便，而且可以讓網頁更加規范和專業。

body{
counter-reset:list; /*初始化自定義計數器*/
}
li{
counter-increment:list; /*使計數器自動加1*/
}
li:before{
content: counter(list) ". "; /*將計數器的值插入到item前面*/
}

使用自定義計數器的基本步驟有三步：

第一步：初始化自定義計數器，可以使用counter-reset設置。這個屬性接受一個參數，用于指定計數器的名字。同時要注意，這個屬性的位置要放在需要計數器的父元素上。

第二步：讓計數器自動加1，可以使用counter-increment設置，同樣需要放在需要計數器的元素上。

第三步： 在需要計數器的元素前面插入計數器的值，可以使用content和counter()函數結合起來使用，函數接收一個參數，用于指定計數器的名字，這里我們使用的是上文初始化的“list”計數器。

h1{
counter-increment:h1; /*將H1計數器加1*/
}
h1:before{
content: counter(h1) ". "; /*給H1加上編號*/
}

同樣的，我們也可以使用計數器給標題編號。需要注意的是，計數器是在元素內增加的，因此每一個標題的計數器都應該是獨立的，可以使用不同的計數器名字。

值得一提的是，CSS計數器還可以用來制作表格中的奇偶行著色、輪播圖等復雜的項目，相信在實際運用中，會非常的有用。