我看來，css計數器在web上還沒有得到充分利用，儘管它們的支援非常好(ie8+)!。在本文中，我將解釋如何在專案中使用css計數器，以及一些用例。
什麼是css計數器
計數器是css3提供的乙個強大的工具，是一種可以讓我們使用css給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似於有序列表的功能。但與有序列表相比，css計數器可以對任意元素計數，同時還可以實現個性化計數。
css 計數器的相關屬性
css 計數器需要三個屬性，分別是：
counter-reset
counter-increment
counter()
「counter-reset」：屬性用於定義和初始化乙個或多個css計數器。它可以使用乙個或多個識別符號作為值，該值指定計數器的名稱。
使用語法：counter-reset:[《識別符號》《整數》?]+|none|inherit
每個計數器名稱後面都可以跟乙個可選的《整數》值，該值指定計數器的初始值。
「注意：」
關鍵字none，inherit和initial不能作為計數器名稱；關鍵字none，inherit可以作為counter-reset屬性的值。設定none將取消設定計數器；設定inherit將從元素的父元素處繼承counter-reset值。該counter-reset屬性的預設值為none。
計數器的初始值不是計數器顯示時的第乙個數字/值。這意味著如果希望計數器從1開始顯示，則需要將counter-reset中的初始值設定為零。0是預設的初始值，所以如果省略它，預設情況下它將重置為零；counter-reset允許使用負值。因此，如果希望計數器從零開始顯示，可以將其初始值設定為-1。
counter-increment屬性用於指定乙個或多個css計數器的增量值。它將乙個或多個識別符號作為值，指定要遞增的計數器的名稱。
使用語法：counter-increment:[《識別符號》《整數》?]+|none|inherit
每個計數器名稱（識別符號）後面都可以跟乙個可選《整數》值，該值指定對於我們所編號的元素每次出現時，計數器需要遞增多少。預設增量為1。允許零和負整數。如果指定了負整數，則計數器被遞減。
counter-increment屬性必須和counter-reset屬性配合使用。
counter() 函式
counter()函式必須和content屬性一起使用，用來顯示css計數器。它以css計數器名稱作為引數，並作為值傳遞給content屬性，而content屬性就會使用:before偽元素將計數器顯示為生成的內容。
counters()函式也有兩種形式：counters(name,string)和counters(name,string,style)。
name引數也是要顯示的計數器的名稱。可以使用counter-reset屬性來指定計數器的名稱。而counters()函式與counter()函式（單數形式）區別在於：counters()函式可以用於設定巢狀計數器。
巢狀計數器是用於為巢狀元素（如巢狀列表）提供自動編號。如果你要將計數器應用於巢狀列表，則可以對第一級專案進行編號，例如，1，2，3等。第二級列表專案將編號為1.1，1.2，1.3等。第**專案將是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。
string引數用作不同巢狀級別的數字之間的分隔符。例如，在』1.1.2』中，點（』.』）用於分隔不同的級別編號。如果我們使用該counters()函式將點指定為分隔符，則它可能如下所示：
content:counters(countername,".");
如果希望巢狀計數器由另乙個字元分隔，例如，如果希望它們顯示為「1-1-2」，則可以使用短劃線而不是點作為字串值：
content:counters(countername,"-");
和counter()函式一樣，style引數是用來定義計數器的風格。預設情況下，計數器使用十進位制數字格式化。具體關於style引數的設定可以參照counter()函式的style引數。
如何新增計數器
為計數器選擇乙個名稱
假設我們有下面的 html:
我想給每個title元素新增乙個數字。為此，我將在父元素上定義乙個計數器。
.content
2.遞增計數器
這一步對於計數器的工作非常重要。在
h2:before
3.分配計數器
最後一步是使用counter()函式作為content屬性的值。現在，新增了以下內容：
h2:before
接著，為before偽元素新增一些樣式，讓它看起來漂亮點：
讓我們學會使用 css 計數器
事件原始碼：
css 計數器用例
動態章節標題
根據前面的示例，我們可以編輯before偽元素，如下所示
h2:before
讓我們學會使用 css 計數器
事件原始碼：
巢狀計數器
假設我們有以下列表:
web development
mobile development
我們想讓一級顯示「1.」,二級對應「1.1」。為此，我們應該執行以下操作：
/* defining a counter for the main list items */
.services
.services__item:before
/* defining a counter for the sub lists */
.services__item ul
.services__item li:before
讓我們學會使用 css 計數器
事例原始碼：
諾禾 諾禾管理系統
擔保管理系統主要功用包括客戶檔案管理 專案管理 保前管理 評級模型 合同登出 反擔保落實 收費登出 保後監管 風控預警 結案辦理 續 理 風險代償和追償 內部辦公 統計報表等功用。經過業務管理系統的施行可進步擔保機構標準管理程度微風險控制才能，從而提公升擔保公司的綜合管理才能。擔保管理系統依據擔保行...
諾禾 MySQL資料庫教程 諾禾整理
mysql資料庫教程 修改資料表結構與刪除表 修改資料表結構與刪除表 資料表一旦定義好之後，一般不需要再去修改資料表結構，尤其是已經儲存大量資料之後。表結構的變化尤其一些約束的改變會直接影響到儲存資料本身。但在一些條件下也是可以修改資料表結構的，如剛定義好的新錶，本節主要介紹資料表結構的修改語法及例...
諾禾 Repeater巢狀迴圈
repeater巢狀迴圈 複製 rptlist runat server onitemdatabound getdata 主表欄位名 子集操作 主表字段 子表對應資料1 子表對應資料2 修正檢視 rptlist.items.count 0 暫無記載 複製 前台 複製 主表資料繫結 private v...