小編給大家分享一下css使用計數(shù)器給元素自動編號的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、杜爾伯特ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的杜爾伯特網(wǎng)站制作公司

一、設(shè)置和使用css計數(shù)器，實現(xiàn)簡單的元素編號

為了創(chuàng)建和使用CSS計數(shù)器，遵循以下步驟：

1、設(shè)置計數(shù)器的名稱并將其重置為我們選擇的初始值。這是使用counter-reset屬性完成的。

counter-reset:   標(biāo)識符（計數(shù)器的名稱）   <整數(shù)>（起始值,可選，默認(rèn)值為0）;

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

counter-reset屬性是在要編號的元素的祖先或兄弟元素上設(shè)置的。例如，如果在文章中對標(biāo)題進(jìn)行編號，則可以在這些標(biāo)題的祖先上設(shè)置計數(shù)器。

article {     
/ *設(shè)置一個名為“section”的計數(shù)器，并將其初始化為0 * / 
    counter-reset：section 0 ;
}

其背后的原因是，重置編號元素上的計數(shù)器將導(dǎo)致出現(xiàn)具有相同編號的元素。這是因為計數(shù)器將被重置為其初始值，然后在顯示之前對每個標(biāo)題進(jìn)行遞增。

2、指定計數(shù)器何時遞增，以及按什么值遞增。

例如，如果希望計數(shù)器在每次出現(xiàn)h3標(biāo)題時遞增，那么將可以指定；這是使用counter-increment屬性完成的。我們可以選擇對每個出現(xiàn)的要編號的元素（本例中為h3）遞增計數(shù)器的任何值。默認(rèn)情況下，計數(shù)器將遞增1；我們還可以使用負(fù)值，這樣計數(shù)器將遞減。

h3 {     
/ *在每次出現(xiàn)h3時使用“section”計數(shù)器，并每次出現(xiàn)就增加1（默認(rèn)值）* / 
    counter-increment：section 1 ;
}

這里需要注意的一件重要事情是：計數(shù)器是在顯示之前遞增，因此如果我們希望第一個標(biāo)題從1開始，則應(yīng)該在計算器中將計數(shù)器的counter-reset屬性初始值設(shè)置為零。

3、顯示計數(shù)器

設(shè)置計數(shù)器并指定何時以及應(yīng)該增加多少后，我們需要顯示該計數(shù)器。

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

在我們的示例中，我們是對h3標(biāo)題進(jìn)行編號，因此我們將在標(biāo)題之前顯示計數(shù)器：

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

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

h3::before {    
 /* 在數(shù)字之后加一個點，后面加上空格 */
    content: counter(my-counter) ". "; 
}

下面我來來看看示例：

html代碼：

<h3>css計數(shù)器的使用</h3>
<p>css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用</p>
         
<h3>css計數(shù)器的使用</h3>
<p>css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用css計數(shù)器的使用</p>

css代碼：

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

效果圖：

二、設(shè)置嵌套計數(shù)器，實現(xiàn)元素的嵌套編號

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

下面我們就來介紹使用嵌套計數(shù)器，來實現(xiàn)元素的嵌套編號的方法。

要實現(xiàn)元素的嵌套編號，最簡單的方法就是使用counters()函數(shù)；使用該函數(shù)，我們可以在一個聲明中設(shè)置多個計數(shù)器，默認(rèn)情況下這些計數(shù)器將嵌套。

示例介紹：我們將使用counters()函數(shù)在嵌套列表上設(shè)置嵌套計數(shù)器。列表（ul，ol）可以嵌套到標(biāo)記中的幾個級別，因此我們可以使用counters()函數(shù)。

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代碼：

首先我們要創(chuàng)建一個計數(shù)器，定義計數(shù)器的名稱為：nested-counter，初始化值為：0；增量為：1。

ul {     
   list-style: none;/* 去除ul中默認(rèn)的樣式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

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

ul  li ：before {     
/ * counters（）函數(shù)內(nèi)的字符串是兩個計數(shù)器之間的分隔符，并且函數(shù)外部的字符串是生成的數(shù)字和列表項的文本之間的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

實現(xiàn)效果，看上圖。

兩個計數(shù)器之間的分隔符，可以有很多，如"."、“-”等等。

三、計數(shù)器的樣式

計數(shù)器也是可以設(shè)置樣式的，不僅僅可以用數(shù)字來顯示編號，還可以是字母（如a，A）,羅馬字符（如：ⅰ，ⅱ）等等，只要是css list-style-type屬性可用的列表樣式類型中的任何一種都可以來設(shè)置計數(shù)器的樣式。在之前的文章【css如何設(shè)置列表樣式？列表樣式的實現(xiàn)】中有介紹，大家可以參考一下。

那么如何設(shè)置？

這就需要設(shè)置style參數(shù)，我們來看看基本語法：

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

name：計數(shù)器名稱，style就是樣式了。

以下是所有可能的計數(shù)器樣式：

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使用計數(shù)器給元素自動編號的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：css使用計數(shù)器給元素自動編號的方法
文章源于：http://jinyejixie.com/article40/gcspho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司、域名注冊、網(wǎng)站內(nèi)鏈、小程序開發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)