前言
博客原文查看可点击《CSS counter属性》哦！
本文引用张鑫旭大大博客文章《CSS counter计数器(content目录序号自动递增)详解》，一直觉得鑫大大是个被程序员耽误的小说家，他的文章风格大都以浅明深，诙谐幽默，可点击这里查看原文哦。
好了，It's my show time!
在了解到counter之前，想到计数应该属ul，ol标签元素了吧，但它们的递增规则单一，无法实现自定义的递增。而counter属性完美的解决了这个问题，让我们一起来看看吧。
首先，使用一个属性前，我们一定得了解一下它的兼容性，曾经被IE兼容性虐哭的我，不得不小心作为一个好用属性的兼容问题。
兼容性
| I E | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 8.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
看到这里是不是心里放松了很多，它的兼容性还是可以的接受的，范围不算局限。
counter的使用题要
CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系
counter成员
counter的成员主要有三个：
- counter-reset（计数器声明及初始值设置）
- counter-increment（递增规则）
- counter()/counters(计算结果生成)
counter-reset
counter-reset主要有三个属性。
-
none：默认。不能对选择器的计数器进行重置。 -
name num：name即标记计数器名称，num即记录计数器初始值。num非必写，默认为0。 -
inherit：规定应该从父元素继承 counter-reset 属性的值。
counter-increment
counter-increment主要有三个属性。
-
none：没有计数器将递增。 -
name num：name即选择递增的计数器，num即增量。num非必写，默认为1，可以是正数、零或者负数。 -
inherit：指定counter-increment属性的值，应该从父元素继承。
counter()/counters()
这是个方法，不是属性。类似CSS3中才calc()计算。
-
name：选择递增的计数器。 -
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
-
string：counters的属性，子序数连接符
<font color="#a00">注：</font>多个计数器还可同时命名，接下来我们上代码看几个例子。
CSS：
1. counter-reset属性
.xxx {
counter-reset: count; /* 计数器名称是'count', 并且默认起始值为0 */
}
.xxx {
counter-reset: count 4; /* 计数器名称是'count', 并且默认起始值为4 */
}
.xxx {
counter-reset: count1 2 count2 3; /* 定义两个计数器'count1'和'count2',默认起始值分别为2和3 */
}
2. counter-increment属性
.counter {
counter-increment: count 2; /*'count'以2阶段递增 */
}
.counter {
counter-increment: count -1; /*'count'以1阶段递减 */
}
3. counter方法
counters(name, style);
.counter:before {
content: counter(count1) '\A' counter(count2); /*'\A'使用inline水平元素换行*/
white-space: pre;
}
接下来看一个完整的例子。
效果如图：
<div class="box">
<div class="list">一级标题
<div class="box">
<div class="list">二级标题</div>
<div class="list">二级标题</div>
<div class="list">二级标题</div>
</div>
<div class="box">
<div class="list">二级标题
<div class="box">
<div class="list">三级标题</div>
<div class="list">三级标题</div>
<div class="list">三级标题</div>
</div>
</div>
</div>
<div class="box"></div>
</div>
<div>
<div class="list">一级标题<div>
</div>
<style>
.box {
counter-reset: counter;
}
.toper, .inner {
background-color: #eee;
margin-left: 20px;
}
.list:before,
.toper:before,
.inner:before {
counter-increment: counter;
}
.list {
padding-left: 20px;
}
.inner:before,
.list:before,
.toper:before {
content: counters(counter,'.')'、';
}
</style>
OK至此，关于counter的介绍就差不多结束了，可以在实践过程中发现和挖掘更有意思的操作，如果你有什么有趣的神操作，可以给我留言分享哦！啦啦啦
