css如何使用計數器為元素自動編號？ css計數器的使用（程式碼範例）

css如何使用計數器為元素自動編號？本篇文章就跟大家介紹設定和使用css計數器的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

在之前的文章【css計數器（counter）是什麼】中我們簡單介紹了css計數器的相關屬性，以及透過程式碼實例來簡單了解了一下css計數器的使用，本篇文章我們就來具體看看css計數器是如何設定和使用的，如何實現元素自動編號的。 【相關影片教學推薦：CSS3教學】

一、設定與使用css計數器，實作簡單的元素編號

##為了建立和使用CSS計數器，請遵循以下步驟：

1、設定計數器的名稱並將其重設為我們選擇的初始值。

這是使用counter-reset屬性完成的。

counter-reset:   标识符（计数器的名称）   <整数>（起始值,可选，默认值为0）;

初始化計數器（指定起始值）是可選的, 如果沒有指定一個確切的值，它將會從零開始，則此時的計數器實現的內會從‘1’開始。

counter-reset屬性是在要編號的元素的祖先或兄弟元素上設定的。例如，如果在文章中對標題進行編號，則可以在這些標題的祖先上設定計數器。

article {     
/ *设置一个名为“section”的计数器，并将其初始化为0 * / 
    counter-reset：section 0 ;
}

背後的原因是，重置編號元素上的計數器將導致出現具有相同編號的元素。這是因為計數器將被重置為其初始值，然後在顯示之前對每個標題進行遞增。

2、指定計數器何時遞增，以及以什麼值遞增。

例如，如果希望計數器在每次出現h2標題時遞增，那麼將可以指定；這是使用counter-increment屬性完成的。我們可以選擇對每個出現的要編號的元素（本例中為h2）遞增計數器的任何值。預設情況下，計數器將遞增1；我們也可以使用負值，這樣計數器將會遞減。

h2 {     
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* / 
    counter-increment：section 1 ;
}

這裡需要注意的一件重要事情是：

計數器是在顯示之前遞增

#，因此如果我們希望第一個標題從1開始，則應該在計算器中將計數器的counter-reset屬性初始值設定為零。

3、顯示計數器

設定計數器並指定何時以及應該增加多少後，我們需要

顯示該計數器

。

要顯示計數器，我們就需要使用content屬性的counter()函數（或counters()巢狀計數器）作為::before偽元素的值。

在我們的範例中，我們是對h2標題進行編號，因此我們將在標題之前顯示計數器：

h2 :: before {     
   content：counter（section）;
}

當然，如果你希望在標題的數字和標題之間添加一些空格和可能的任何其他分隔符，可以通過將分隔符附加到計數器的counter()函數中來執行此操作，使用字串作為值，例：

h2::before {    
 /* 在数字之后加一个点，后面加上空格 */
    content: counter(my-counter) ". "; 
}

下面我來看看範例：html程式碼：

<h2 id="css计数器的使用">css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
         
<h2 id="css计数器的使用">css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

css程式碼：

 body{
     counter-reset: section;
}
             
 h2:before{
     counter-increment: section;
     content: counter(section) ".";
}

效果圖：

##二、設定巢狀計數器，實現元素的巢狀編號

有時在一個大標題下面還會有多個2級標題，3級標題，標題一個嵌套一個（如，下圖），如何編號？

下面我們就來介紹使用巢狀計數器，來實現元素的巢狀編號的方法。

要實現元素的巢狀編號，最簡單的方法就是使用

counters()函數

；使用該函數，我們可以在一個宣告中設定多個計數器，預設情況下這些計數器將嵌套。

範例介紹：我們將使用counters()函數在巢狀清單上設定巢狀計數器。列表（ul，ol）可以嵌套到標記中的幾個級別，因此我們可以使用counters()函數。

html程式碼：

<div class="container">
  <ul>
    <li> 菜单1
      <ul>
        <li>菜单1.1</li>
        <li>菜单1.2</li>
        <li>菜单1.3
          <ul>
            <li>菜单1.3.1</li>
            <li>菜单1.3.2</li>
            <li>菜单1.3.3</li>
            <li>菜单1.3.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>菜单2
      <ul>
        <li>菜单2.1</li>
        <li>菜单2.2</li>
        <li>菜单2.3</li>
      </ul>
    </li>
  </ul>
</div>

css程式碼：#首先我們要建立一個計數器，定義計數器的名稱為：nested-counter，初始化值為：0；增量為：1。

ul {     
   list-style: none;/* 去除ul中默认的样式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

顯示計數器很簡單。我們將使用一個點作為嵌套計數器之間的分隔符，我們將在計數器和列表項中的文字之間添加一個右括號作為分隔符，僅用於更改。 ###

ul  li ：before {     
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

###實現效果，看上圖。 ######兩個計數器之間的分隔符，可以有很多，如"."、「-」等等。 ###############三、計數器的樣式#########

计数器也是可以设置样式的，不仅仅可以用数字来显示编号，还可以是字母（如a，A）,罗马字符（如：ⅰ，ⅱ）等等，只要是css list-style-type属性可用的列表样式类型中的任何一种都可以来设置计数器的样式。在之前的文章【css如何设置列表样式？列表样式的实现】中有介绍，大家可以参考一下。

那么如何设置？

这就需要设置style参数，我们来看看基本语法：

counter(name，style)
counters(name，分隔符，style)

name：计数器名称，style就是样式了。

以下是所有可能的计数器样式：

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

以上是css如何使用計數器為元素自動編號？ css計數器的使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！