css計數(shù)器實現(xiàn)自動嵌套編號的方法

小編給大家分享一下css計數(shù)器實現(xiàn)自動嵌套編號的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在css中可以使用計數(shù)器函數(shù)counter()和counters()配合content屬性來分別實現(xiàn)給元素自動嵌套編號的效果。

css計數(shù)器使用多個counter()函數(shù)嵌套編號

css計數(shù)器的counter()函數(shù)是設(shè)置元素單個編號的，但我們可以嵌套使用counter()函數(shù)來設(shè)置嵌套編號。

我們來看看是如何實現(xiàn)的，給出html代碼：

<article>
    <h2>CSS計數(shù)器自動嵌套編號</h2>

    <h3>大標(biāo)題</h3>
    <h4>二級標(biāo)題</h4>
    <p>
              二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容！
    </p>


    <h3>大標(biāo)題</h3>
    <h4>二級標(biāo)題</h4>
    <p>
              二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容！
    </p>
    <h4>二級標(biāo)題</h4>
    <p>
             二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容，二級標(biāo)題的內(nèi)容！
    </p>
  </article>

效果圖：

下面我們就來看看css是如何實現(xiàn)嵌套編號的。

1、使用css計數(shù)器讓大標(biāo)題<h3>自動編號

在h3標(biāo)簽的父容器article標(biāo)簽中使用counter-reset屬性給css計數(shù)器添加名稱“my-counter”，初始化計數(shù)器；

然后在h3標(biāo)簽中使用counter-increment屬性定義計數(shù)器每次遞增的值，默認值為1，可省略。

最后使用:before選擇器和content屬性把編號添加到h3標(biāo)簽前顯示。

article {
  counter-reset: my-counter;
}
h3 {
  counter-increment: my-counter;
}
h3:before {
  content: counter(my-counter) ". ";
}

效果圖：

2、使用css計數(shù)器讓二級標(biāo)題<h4>自動編號

在h4標(biāo)簽的父容器h3標(biāo)簽中給css計數(shù)器添加名稱“sub-counter”，初始化計數(shù)器；

然后在h4標(biāo)簽中定義計數(shù)器每次遞增的值，在定義二級標(biāo)題的樣式。

最后使用:before選擇器和content屬性把編號添加到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)題的編號放在最前面，在使用"."分隔，然后是使用counter(sub-counter)顯示二級標(biāo)題自身的編號。

效果圖：

css計數(shù)器使用counters()函數(shù)嵌套編號

使用counters()函數(shù)，我們可以在一個聲明中設(shè)置多個計數(shù)器，默認情況下這些計數(shù)器將嵌套。

注：counters()函數(shù)只有在對實際嵌套在標(biāo)記中的嵌套元素進行編號時， 該函數(shù)才有效。例：<ul><li>標(biāo)簽

下面我們通過簡單的代碼示例來看看counters()函數(shù)是如何嵌套標(biāo)號的。

html代碼：

<div class="container">
  <ul>
    <li> Item
      <ul>
        <li>Sub-Item</li>
        <li>Sub-Item
          <ul>
            <li>Sub-Sub-Item</li>
            <li>Sub-Sub-Item</li>
          </ul>
        </li>
      </ul>
    </li>
    <li> Item
      <ul>
        <li>Sub-Item</li>
        <li>Sub-Item</li>
        <li>Sub-Item</li>
      </ul>
    </li>
  </ul>
</div>

css代碼：

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 1.5em;
}

ul {
  list-style: none;
  counter-reset: nested-counter;/*初始化css計數(shù)器*/
}

ul li {
  counter-increment: nested-counter;/*定義css計數(shù)器每次遞增的值*/
  line-height: 1.6;
}
ul li:before {
  content: counters(nested-counter, ".") ") ";/*顯示編號*/
  font-weight: bold;
}

效果圖：

看完了這篇文章，相信你對css計數(shù)器實現(xiàn)自動嵌套編號的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！