CSS的計數器

前端相容

11-19 

當前位置：

首頁 > 

前端相容 > 正文

css counters其實就是一計數器，早期在css中計數器僅存在於ul和ol元素。如果要使用在div這樣的元素上，只能通過list-style-image或者是元素的backgroud-image來實現。在

css2.1的規範

中介紹了一種新技術，允許開發人員使用偽類:after、:before或者偽元素::after、::before給任何元素建立自動遞增計數器——類似於列表中的專案符號(list-style-type)。更神奇的是，可以給這些計數器設定獨特樣式，讓其在外觀上更靚麗。如下圖所示：

這種技術令人有點困惑，因為他看起來不同於其他css屬性，需要同時使用多個css屬性。接下來與大家一起**如何使用這幾個屬性。

前面也提到過，使用css counters給元素建立自動遞增計算器不僅僅是依賴於某乙個css屬性來完成，他需要幾個屬性一起使用才會有效果。使用的到屬性包括：

要想完全了解或者熟練使用好css counters來建立計數器，就需要對用到的每個屬性的使用規則有一定的了解。接下來就先簡單的了解這幾個屬性。

語法規則

counter-reset:[ >

>
? ]+ | none | inherit

counter-reset的預設值為none，其主要取值包括兩個部分：

功能描述

counter-reset主要功能用來標識計數器作用域，而且此值必須用在選擇器上，必且是不能缺少的。共包括兩個部分，第乙個部分是自定義計數器名稱，這一部分是必需的。第二部分是計數器起始值，此值是可選的。預設值為0。此值告訴標識組起始值是什麼，所以說這個值非常有價值。因為，如果你設定的值為0，那麼計數從1開始；如果你設定的值是-5，那麼計數從-4開始。依此類推。

counter-reset屬性可以包含乙個或者多個計數器識別符號，每個後面都可以跟乙個整數值，如section 0 heading 0。如果元素都重置，並且增加乙個計數器，計數器是第一次重置，後面值就會遞增。如果不止一次指定同乙個計算器，則將按指定的計數器做遞增。

語法規則

counter-increment:[ >

>
? ]+ | none | inherit

預設值為none。其值也包括兩個部分：

功能描述

counter-increment屬性是用來標識計數器與實際相關聯元素範圍。其第乙個值是必需的，獲取counter-reset定義的識別符號。

counter-ncrement第二個值是乙個可選值，是乙個整數值，可以是正整數，也可以是負整數。主要用來預設遞增的值，如果取值為負值時，表示遞減。預設值為1。

content是和偽類:before、:after或者偽元素::before、::after配合在一起使用，主要功能用來生成內容。有關於content詳細介紹，此處不做過多闡述，感興趣的同學可以閱讀divya manian寫的《css generated content techniques》一文。

在本文中所涉及到的內容，content屬性主要與counter()配合使用，用來生成計數器值,如：

h2

}

counter()函式接受兩個引數，而且兩引數之間使用逗號(,)來分隔。第乙個引數是counter-increment定義的屬性值,用來告訴該文件插入的計數器識別符號名稱是什麼。第二個是用來設定計數器的風格，有點類似於list-style-type。預設情況之下取值為十制，但你也可以重置這個樣式風格，比如upper-roman或者upper-alpha等。

counter()函式第二個值與列表中的list-style-type值相等：

同樣的，可以使用多個counter()，如：content: counter(chapter,upper-roman) "-" counter(section,upper-roman);。

css計數器詳解

就是採用css給一些html元素自動生成編號，比如類似1.3.2這種，先看個效果 對，就是這種類似word裡面很常見的效果，如下 進風口的爽膚水 非進口商的 非進口商的 非進口商的 進風口的爽膚水 非進口商的 非進口商的 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 將咖啡色的開發商 非進口...

計數器 讓我們學會使用 CSS 計數器

我看來，css計數器在web上還沒有得到充分利用，儘管它們的支援非常好 ie8 在本文中，我將解釋如何在專案中使用css計數器，以及一些用例。計數器是css3提供的乙個強大的工具，是一種可以讓我們使用css給元素自動編號的方法。使用它可以很方便對頁面中的任意元素進行計數，實現類似於有序列表的功能。但...

計數器 智慧型計數器簡介

計數器主要是應用於電子科技領域，計數器是一種運用得比較多的時序邏輯電路。計數器可以對數字進行運算，它是一種沒有辦法顯示計算結果的顯示器。隨著電子科技的不斷發展，現在的計數器也實現了智慧型功能。智慧型計數器的出現幫助我們實現了很多高強度生產問題 複雜的技術問題，並且節約了生產成本和人力成本。智慧型計數...