弱小的 css 计数器
css content 属性有很多实用的用法，这其中最为弱小的莫过于是计数器了，它甚至能够实现连 javascript 都不可能实现的成果，上面咱们一起来钻研一下吧。
css 计数器次要有 3 个关键点须要把握。如下:
- 首先须要一个计数器的名字，这个名字由使用者本人定义。
- 计数器有一个计数规定，比方是 1,2,3,4...这样的递增形式，还是 1,2,1,2...这样的间断递增形式。
- 计数器的应用，即定义好了一个计数器名字和计数规定，咱们就须要去应用它。
以上 3 个关键点别离对应的就是 css 计数器的 counter-reset 属性,counter-increment 属性，和 counter()/counters()办法。上面咱们顺次来介绍这三个玩意儿。
counter-reset 属性
counter-reset 属性叫做计数器重置，对应的就是创立一个计数器名字，如果能够，顺便也能够通知计数器的计数起始值,也就是从哪个值开始计数，默认值是 0,留神是 0,而不是 1。例如以下一个示例:
html 代码如下:
<p>开始计数，计数器名叫counter</p><p class="counter"></p>css 代码如下:
.counter { counter-reset: counter;}.counter::before { content: counter(counter);}在浏览器中运行以上示例，你会看到如下图所示:
能够看到计数器的初始值就是 0,当初咱们批改一下 css 代码，如下所示:
.counter { counter-reset: counter 1;}在浏览器中运行以上示例，你会看到如下图所示:
这次咱们指定了计数器的初始值 1，所以后果就是 1，计数器的初始值同样也能够指定成小数，正数，如-2,2.99 之类，只不过 IE 和 FireFox 浏览器都会认为是不非法的数值，当做默认值 0 来解决，谷歌浏览器也会间接显示正数，如下图所示:
低版本谷歌浏览器解决小数的时候是向下取整，比方 2.99 则显示 2,最新版本则当成默认值 0,来解决，如下图所示:
ps: 当然不举荐指定初始值为正数或者小数。
你认为到这里就完了吗？还没有，计数器还能够指定多个，每一个计数器之间用空格隔开，比方以下代码:
.counter { counter-reset: counter1 1 counter2 2;}.counter::before { content: counter(counter1) counter(counter2);}在浏览器中运行以上示例，你会看到如下图所示:
除此之外，计数器名还能够指定为 none 和 inherit，也就是勾销计数和继承计数器，这没什么好说的。
counter-increment
顾名思义，该属性就是计数器递增的意思，也就是定义计数器的计数规定，值为计数器的名字，能够是一个或者多个，并且也能够指定一个数字，示意计数器每次变动的数字，如果不指定，默认就依照 1 来变动。比方以下代码:
.counter { counter-reset: counter 1; counter-increment: counter;}失去的后果就是: 1 + 1 = 2。如下图所示:
再比方以下代码:
.counter { counter-reset: counter 2; counter-increment: counter 3;}失去的后果就是： 2 + 3 = 5，如下图所示:
由此可见，计数器的规定就是: 计数器名字惟一，每指定一次计数规定，计数器就会加一，每指定二次计数规定，计数器就会加二，……以此类推。
计数规定不仅能够创立在元素上，也能够创立在应用计数器的元素上，比方以下代码:
.counter { counter-reset: counter; counter-increment: counter;}.counter::before { content: counter(counter); counter-increment: counter;}咱们不仅在类名为 counter 元素上创立了一个计数器规定，同样的也在 before 伪元素上创立了一个计数器规定，因而最初的后果就是: 0 + 1 + 1 = 2。如下图所示:
总而言之，无论地位在何处，只有有 counter-increment，对应的计数器的值就会变动， counter()只是输入而已!计数器的数值变动遵循 HTML 渲染程序，遇到一个 increment 计数器就变动，什么时候 counter 输入就输入此时的计数值。
除此之外，计数器规定也能够和计数器一样，创立多个计数规定，也是以空格辨别，比方以下示例代码:
.counter { counter-reset: counter1 1 counter2 2; counter-increment: counter1 2 counter2 3;}.counter::before { content: counter(counter1) counter(counter2); counter-increment: counter1 4 counter2 5;}此时的后果就应该是计数器 1: 1 + 2 + 4 = 7,计数器 2: 2 + 3 + 5 = 10。如下图所示:
同样的，计数器规定的值也能够是正数，也就是递加成果了，比方以下代码:
.counter { counter-reset: counter1 1 counter2 2; counter-increment: counter1 -1 counter2 -3;}.counter::before { content: counter(counter1) counter(counter2); counter-increment: counter1 2 counter2 5;}此时的后果就应该是计数器 1: 1 - 1 + 2 = 2,计数器 2: 2 - 3 + 5 = 4。如下图所示:
同样的计数规定的值也能够是 none 或者 inherit。
counter
counter 办法相似于 calc，次要用于定义计数器的显示输入，到目前为止，咱们后面的示例都是最简略的输入，也就是如下语法:
counter(name); /* name为计数器名 */实际上还有如下的语法:
counter(name,style);style 参数和 list-style-type 的值一样，意思就是不仅能够显示数字，还能够显示罗马数字，中文字符，英文字母等等，值如下:
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 | simp-chinese-informal;比方以下的示例代码:
.counter { counter-reset: counter; counter-increment: counter;}.counter::before { content: counter(counter, lower-roman);}后果如下图所示:
再比方以下的示例代码:
.counter { counter-reset: counter; counter-increment: counter;}.counter::before { content: counter(counter, simp-chinese-informal);}后果如下图所示:
同样的 counter 也能够反对级联，也就是说，一个 content 属性值能够有多个 counter 办法，如:
.counter { counter-reset: counter; counter-increment: counter;}.counter::before { content: counter(counter) '.' counter(counter);}后果如下图所示:
counters
counters 办法尽管只是比 counter 多了一个 s 字母，然而含意可不一样，counters 就是用来嵌套计数器的，什么意思了？咱们平时如果显示列表符号，不可能只是单单显示 1,2,3,4...还有可能显示 1.1,1.2,1.3...前者是 counter 做的事件，后者就是 counters 干的事件。
counters 的语法为:
counters(name, string);name 就是计数器名字，而第二个参数 string 就是分隔字符串，比方以'.'分隔，那 string 的值就是'.'，以'-'分隔，那 string 的值就是'-'。来看如下一个示例:
html 代码如下:
<div class="reset"> <div class="counter"> javascript框架 <div class="reset"> <div class="counter"> angular</div> <div class="counter"> react</div> <div class="counter"> vue <div class="reset"> <div class="counter"> vue语法糖 <div class="reset"> <div class="counter"> @</div> <div class="counter"> v-</div> <div class="counter"> :</div> </div> </div> </div> </div> </div> </div></div>css 代码如下:
.reset { counter-reset: counter; padding-left: 20px;}.counter::before { content: counters(counter, '-') '.'; counter-increment: counter;}后果如下图所示:
这种计数成果在模仿书籍的目录成果时十分实用，比方写文档，会有嵌套题目的状况，还有一个比拟重要的点须要阐明一下，就是显示 content 计数值的那个 DOM 元素在文档流中的地位肯定要在 counter-increment 元素的前面，否则是没有计数成果的。
总而言之，content 计数器是十分弱小的，以上都只是很根底的用法，真正把握还须要大量的实际以及灵感还有创意。