使用CSS計數器就像使用變量一樣。
?
它有以下幾個屬性：
counter-reset
創建或重置計數器
?
計數器verilog、 counter-increment
增長計數器
?
content
生成內容
?
counter()
將計數器的值添加到元素中
?
css設計器。使用CSS計數器，我們必須首先創建它。
?
dome1
效果：
counter計數器怎樣設置。不過得注意一下，必須用偽元素來生產內容，不然不起效果。
這樣簡單的說一下原理，就是它有多少個元素添加了counter-increment:list;這個它就可以加1。
?
不相信的話我們可以再來看個東西，可以說明它不是按照元素的，而是根據counter-increment，如果它的值是一樣的就可以增加。
css calc函數、有了這個屬性，如果需要這種效果就不要去寫JS了。
?
如果你覺得你會了，那就錯了，其實還有很多坑，來看一個復雜點的。
?
cssselector？ 這個好像沒有什么問題對吧，但我為什么要給body加呢？其實有原因的，再來看這個counter-reset，它表示創建或重置計數器，那么就有問題了，什么情況下它表示創建，什么情況下它表示重置？
以我的觀察是，當第一次使用counter-reset就表示創建，第二次表示重置，但要注意是同一個元素才會重置。body一個頁面只有一個，所有對于只需要增加而不需要重置的計數器就可以寫去body里面，當然也可以寫去其他元素里面，只要保證它是唯一的，當然這句話不是100%正確，不好描述，自己試試就懂了。
?
看最后一個例子。
css動畫屬性、?
這個你能理解，就差不多了，不能就自己多試幾次，也沒啥。
?
2016.09.22更新
這幾天在項目中都有用到這個技術，確實挺好用的，另外再講幾個小技巧。
?
div+css。利用計數器來實現獲取input checked選擇的數量。
怎么樣，還可以吧？
?
其實我們還可以自己手動更改counter-increment的數值大小，比如下面這個。
verilog 計數器。其代碼是這個
CSS：
body{
counter-reset:num;
}
input:nth-of-type(1):checked{
counter-increment:num 5;
}
input:nth-of-type(2):checked{
counter-increment:num 2;
}
input:nth-of-type(3):checked{
counter-increment:num 7;
}
input:nth-of-type(4):checked{
counter-increment:num 1;
}
div::after{
content:'Count ' counter(num);
}
HTML:
5<input type="checkbox">
2<input type="checkbox">
7<input type="checkbox">
1<input type="checkbox">
<div></div>
?通過這個可以很好的實現下面的這種效果。
mysql游標？
注意除了后面的文字左邊的間距是一樣的。
我的實現方式是這樣的。
HTML：
<dl class="list">
<dt class="title">會員特權</dt>
<dd>每個在線商品均可享受成本價特惠購買，每個商品可享受5~200元不等的優惠力度</dd>
<dd>分享所有商品項目鏈接給朋友，朋友也可以享受優惠1~40元不等的優惠</dd>
<dd>更多特權敬請期待</dd>
</dl>
CSS：
cssdiner、dl{
margin:0 1.2rem;
}
dl>dt{
border-bottom:1px solid #dedede;
}
dl:first-of-type{
margin-top:20px;
}
.list{
counter-reset:list;
}
.list>dd{
line-height:2;
counter-increment:list;
font-family:sans-serif;
padding-left:1.2rem;
position:relative;
color:#999;
}
.list>dd::before{
content:counter(list) '. ';
position:absolute;
left:0;
top:0;
}
OK。
?
2016.09.25更新
最近發現counter還支持傳遞一個值用來改變顯示的序號如下。
代碼：
<style>
body,div{
margin:0;
padding:0;
}
ul{
list-style:none;
counter-reset:a;
}
li{
counter-increment: a;
}
li::before{
content:counter(a,cjk-ideographic) ' ';
}</style>
<ul>
<li>CSS</li>
<li>Javascript</li>
<li>HTML5</li>
</ul>
這里用了“cjk-ideographic”它會按照大小數字來顯示。
那么這個值哪里來的呢？它就是“list-style-type”里面的值，更多你可以去找這里面的。還可以按照a，b，c的順序，這個也比較常用。
?
