互聯網 - 大數據

使用CSS計數器就像使用變量一樣。

 

它有以下幾個屬性：

　　counter-reset
　　創建或重置計數器

 

　　counter-increment
　　增長計數器

 

　　content
　　生成內容

 

　　counter()
　　將計數器的值添加到元素中

 

使用CSS計數器，我們必須首先創建它。

 

dome1

效果：

不過得注意一下，必須用偽元素來生產內容，不然不起效果。

這樣簡單的說一下原理，就是它有多少個元素添加了counter-increment:list;這個它就可以加1。

 

不相信的話我們可以再來看個東西，可以說明它不是按照元素的，而是根據counter-increment，如果它的值是一樣的就可以增加。

有了這個屬性，如果需要這種效果就不要去寫JS了。

 

如果你覺得你會了，那就錯了，其實還有很多坑，來看一個復雜點的。

 

　　這個好像沒有什么問題對吧，但我為什么要給body加呢？其實有原因的，再來看這個counter-reset，它表示創建或重置計數器，那么就有問題了，什么情況下它表示創建，什么情況下它表示重置？

　　以我的觀察是，當第一次使用counter-reset就表示創建，第二次表示重置，但要注意是同一個元素才會重置。body一個頁面只有一個，所有對于只需要增加而不需要重置的計數器就可以寫去body里面，當然也可以寫去其他元素里面，只要保證它是唯一的，當然這句話不是100%正確，不好描述，自己試試就懂了。

 

看最后一個例子。

 

這個你能理解，就差不多了，不能就自己多試幾次，也沒啥。

 

2016.09.22更新

這幾天在項目中都有用到這個技術，確實挺好用的，另外再講幾個小技巧。

 

利用計數器來實現獲取input checked選擇的數量。

怎么樣，還可以吧？

 

其實我們還可以自己手動更改counter-increment的數值大小，比如下面這個。

其代碼是這個

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>

 通過這個可以很好的實現下面的這種效果。

注意除了后面的文字左邊的間距是一樣的。

我的實現方式是這樣的。

HTML：

<dl class="list">
　　<dt class="title">會員特權</dt>
　　<dd>每個在線商品均可享受成本價特惠購買，每個商品可享受5~200元不等的優惠力度</dd>
　　<dd>分享所有商品項目鏈接給朋友，朋友也可以享受優惠1~40元不等的優惠</dd>
　　<dd>更多特權敬請期待</dd>
</dl>

CSS：

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的順序，這個也比較常用。