小編給大家分享一下css計(jì)數(shù)器實(shí)現(xiàn)自動(dòng)嵌套編號(hào)的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、頭屯河網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為頭屯河等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
在css中可以使用計(jì)數(shù)器函數(shù)counter()和counters()配合content屬性來分別實(shí)現(xiàn)給元素自動(dòng)嵌套編號(hào)的效果。
css計(jì)數(shù)器使用多個(gè)counter()函數(shù)嵌套編號(hào)
css計(jì)數(shù)器的counter()函數(shù)是設(shè)置元素單個(gè)編號(hào)的，但我們可以嵌套使用counter()函數(shù)來設(shè)置嵌套編號(hào)。
我們來看看是如何實(shí)現(xiàn)的，給出html代碼：
CSS計(jì)數(shù)器自動(dòng)嵌套編號(hào)
大標(biāo)題
二級(jí)標(biāo)題
二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容！
大標(biāo)題
二級(jí)標(biāo)題
二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容！
二級(jí)標(biāo)題
二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容，二級(jí)標(biāo)題的內(nèi)容！
效果圖：
下面我們就來看看css是如何實(shí)現(xiàn)嵌套編號(hào)的。
1、使用css計(jì)數(shù)器讓大標(biāo)題自動(dòng)編號(hào)
在h3標(biāo)簽的父容器article標(biāo)簽中使用counter-reset屬性給css計(jì)數(shù)器添加名稱“my-counter”，初始化計(jì)數(shù)器；
然后在h3標(biāo)簽中使用counter-increment屬性定義計(jì)數(shù)器每次遞增的值，默認(rèn)值為1，可省略。
最后使用:before選擇器和content屬性把編號(hào)添加到h3標(biāo)簽前顯示。
重慶分公司
重慶分公司
article {
counter-reset: my-counter;
}
h3 {
counter-increment: my-counter;
}
h3:before {
content: counter(my-counter) ". ";
}效果圖：
2、使用css計(jì)數(shù)器讓二級(jí)標(biāo)題自動(dòng)編號(hào)
在h4標(biāo)簽的父容器h3標(biāo)簽中給css計(jì)數(shù)器添加名稱“sub-counter”，初始化計(jì)數(shù)器；
然后在h4標(biāo)簽中定義計(jì)數(shù)器每次遞增的值，在定義二級(jí)標(biāo)題的樣式。
最后使用:before選擇器和content屬性把編號(hào)添加到h4標(biāo)簽前顯示。
h3 {
counter-reset: sub-counter;
}
h4 {
counter-increment: sub-counter;
font-style: italic;
color: #3498DB;
}
h4:before {
content: counter(my-counter) "." counter(sub-counter) " ";
}使用counter(my-counter) 把大標(biāo)題的編號(hào)放在最前面，在使用"."分隔，然后是使用counter(sub-counter)顯示二級(jí)標(biāo)題自身的編號(hào)。
效果圖：
css計(jì)數(shù)器使用counters()函數(shù)嵌套編號(hào)
使用counters()函數(shù)，我們可以在一個(gè)聲明中設(shè)置多個(gè)計(jì)數(shù)器，默認(rèn)情況下這些計(jì)數(shù)器將嵌套。
注：counters()函數(shù)只有在對(duì)實(shí)際嵌套在標(biāo)記中的嵌套元素進(jìn)行編號(hào)時(shí)， 該函數(shù)才有效。例：
下面我們通過簡單的代碼示例來看看counters()函數(shù)是如何嵌套標(biāo)號(hào)的。
html代碼：
- Item
- Sub-Item
- Sub-Item
- Sub-Sub-Item
- Sub-Sub-Item
- Item
- Sub-Item
- Sub-Item
- Sub-Item
css代碼：
.container {
margin: 40px auto;
max-width: 700px;
background-color: white;
padding: 1.5em;
}
ul {
list-style: none;
counter-reset: nested-counter;/*初始化css計(jì)數(shù)器*/
}
ul li {
counter-increment: nested-counter;/*定義css計(jì)數(shù)器每次遞增的值*/
line-height: 1.6;
}
ul li:before {
content: counters(nested-counter, ".") ") ";/*顯示編號(hào)*/
font-weight: bold;
}效果圖：
看完了這篇文章，相信你對(duì)css計(jì)數(shù)器實(shí)現(xiàn)自動(dòng)嵌套編號(hào)的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
