在css中可以使用計數器函數counter()和()配合content屬性來分別實現給元素自動嵌套編號的效果，下面我們就來看看CSS計數器函數counter()和()是如何自動嵌套編號的。
css計數器使用多個counter()函數嵌套編號
css計數器的counter()函數是設置元素單個編號的，但我們可以嵌套使用counter()函數來設置嵌套編號。
我們來看看是如何實現的，給出html代碼：
CSS計數器自動嵌套編號
大標題
二級標題
二級標題的內容，二級標題的內容，二級標題的內容！
大標題
二級標題
二級標題的內容，二級標題的內容，二級標題的內容！
二級標題
二級標題的內容，二級標題的內容，二級標題的內容！
登錄后復制
效果圖：
下面我們就來看看css是如何實現嵌套編號的。
1、使用css計數器讓大標題自動編號
在h2標簽的父容器article標簽中使用counter-reset屬性給css計數器添加名稱“my-counter”，初始化計數器；
然后在h2標簽中使用counter-屬性定義計數器每次遞增的值，默認值為1，可省略。
最后使用:before選擇器和content屬性把編號添加到h2標簽前顯示。
article {
counter-reset: my-counter;
}
h2 {
counter-increment: my-counter;
}
h2:before {
content: counter(my-counter) ". ";
}
登錄后復制
效果圖：
2、使用css計數器讓二級標題自動編號
在h3標簽的父容器h2標簽中給css計數器添加名稱“sub-counter”，初始化計數器；
然后在h3標簽中定義計數器每次遞增的值，在定義二級標題的樣式。
最后使用:before選擇器和content屬性把編號添加到h3標簽前顯示。
h2 {
counter-reset: sub-counter;
}
h3 {
counter-increment: sub-counter;
font-style: italic;
color: #3498DB;
}
h3:before {
content: counter(my-counter) "." counter(sub-counter) " ";
}
登錄后復制
使用counter(my-counter) 把大標題的編號放在最前面，在使用"."分隔，然后是使用counter(sub-counter)顯示二級標題自身的編號。
效果圖：
css計數器使用()函數嵌套編號
使用()函數，我們可以在一個聲明中設置多個計數器，默認情況下這些計數器將嵌套。
注：()函數只有在對實際嵌套在標記中的嵌套元素進行編號時， 該函數才有效。例：