我看來，css計數器在web上還沒有得到充分利用，儘管它們的支援非常好(ie8+)!。在本文中，我將解釋如何在專案中使用css計數器，以及一些用例。
計數器是css3提供的乙個強大的工具，是一種可以讓我們使用css給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似於有序列表的功能。但與有序列表相比，css計數器可以對任意元素計數，同時還可以實現個性化計數。
css 計數器需要三個屬性，分別是：
counter-reset
「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
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,".");content:counters(countername,"-");1. 為計數器選擇乙個名稱
假設我們有下面的 html:
.content這一步對於計數器的工作非常重要。在
h2:before最後一步是使用counter()函式作為content屬性的值。現在，新增了以下內容：
h2:before事件原始碼：
動態章節標題
根據前面的示例，我們可以編輯before偽元素，如下所示
事件原始碼：
巢狀計數器
假設我們有以下列表:
designweb mobile graphic web development mobile developmentios android windows phone我們想讓一級顯示「1.」,二級對應「1.1」。為此，我們應該執行以下操作：
事例原始碼：
CSS的計數器
前端相容 11 19 當前位置 首頁 前端相容 正文 css counters其實就是一計數器，早期在css中計數器僅存在於ul和ol元素。如果要使用在div這樣的元素上，只能通過list style image或者是元素的backgroud image來實現。在 css2.1的規範 中介紹了一種新...
css計數器詳解
就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果 對，就是這種類似word裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...
Jmeter計數器的使用
說一下jmeter中，配置元件 計數器的使用。如果需要引用的資料量較大，且要求不能重複或者需要自增，那麼可以使用計數器來實現。1 啟動jmeter，新增執行緒組，右鍵新增配置元件 計數器，如下圖 新增完成如下圖 starting value 給定計數器的起始值 初始值 遞增 每次迭代後，給計數器增加...