包含了兩個屬性和一個方法：

1. counter-reset 2. counter-increment 3. counter()/counters() counter-reset（主要作用就是給計數器起個名字。如果可能，順便告訴下從哪個數字開始計數。默認是0）： .xxx { counter-reset: small-apple; } ? ? ? ? ? ? ?/* 計數器名稱是'small-apple' ，用來*/ .xxx { counter-reset: small-apple 2; } ? ? ? ? ? /* 計數器名稱是'small-apple', 并且默認起始值是2 */ 可以多個計時器同時命名： .xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; } counter-reset還可以設置為none和inherit. 干掉重置以及繼承重置。 counter-increment（counter遞增幅度，默認變化值1，也可以是負數）： .counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; } .counter:before { content: counter(wangxiaoer); } <p class="counter"></p> counter-increment會疊加，例如before和after都用了： .counter { counter-reset: wangxiaoer 2; } .counter:before,.counter:after { content: counter(wangxiaoer); counter-increment: wangxiaoer; } 結果輸出：34 也可以同時設置多個定時器的： counter-increment: test 1 lala 2; counter()/counters() ?（這是個方法，不是屬性。類似CSS3中才calc()計算）： 1、counter(name) /* name就是counter-reset的名稱 */ 2、counter(name, style) style，其支持的關鍵字值就是list-style-type支持的那些值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/

轉載于:https://www.cnblogs.com/chuangweili/p/5167976.html

總結

以上是生活随笔為你收集整理的counter 计数器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。