CSS 列表模型之counter计数器

计数器是一种非凡的数字跟踪器，通常用于为CSS列表项主动编号。你能够在我的项目中通过counter-increment、counter-set、counter-reset来创立一个计数器，并在counter()/counters()中应用。

在CSS语法中，须要定义一个counter-name作为计数器的惟一标识，这是必不可少的。解析计数器个别有以下几个步骤：

以后计数器从父元素继承而来，遵循父元素的计数规定
通过counter-reset实例化一个新的计数器
通过counter-increment设置计数器的递增值
通过counter-set为计数器设置计数初始值
通过counter()/counters()应用计数器
counter-reset
你能够应用counter-reset实例化元素上的新计数器，作用是给这个新计数器起一个名字并附上初始值。[<counter-name> <integer>]中<counter-name>就是计数器名字，<integer>为初始化，初始值默认为0。上面是罕用的两个例子：
```
h1 { counter-reset: zhaodao } /* 计数器名称'zhaodao' */h1 { counter-reset: zhaodao 99 } /* 计数器名称'zhaodao', 并附初值99 */
```
你也能够给初值设置正数或者小数，不过设置小数时，比方2.99，在IE和Firefox中无奈辨认，会当做0解决；在Chrome下向下取整，当成2解决。你也能够利用它给多个计数器同时命名。
```
H1 { counter-reset: zhaodao -1 zhaodaom 99 }
```
counter-set 用法与 counter-reset 一样，这里不做解释，如果你感兴趣，能够移步https://www.w3.org/TR/2020/WD-css-lists-3-20200709 规范文档自行浏览
counter-increment

你能够应用counter-increment为你定义的计数器设置每一次递增的值。计数规定能够简述为：counter-reset惟一，每counter-increment1次，计数值就加1。你能够像上面的例子一样应用它们。

.counter { counter-reset: zhaodao 2; counter-increment: zhaodao; }.counter:before { content: counter(zhaodao); }

这里值得细说一下，.counter作用的第一个元素的计数值显示为3，而不是定义的zhaodao初始值2。这是因为counter-increment的起因，在渲染第一个元素的时候，counter-increment就曾经再起作用，使得初始值递增1，最初渲染进去的就是3，而不是2。

counter()/counters()

你能够应用最简略的组合应用形式：

counter(zhaodao) /* zhaodao就是counter-reset的名称 */

根底应用语法counter(name, style)，其中style在此与list-style-type代表统一，示意一种计数的字符模式。比方你能够像上面一样去应用：

counter(zhaodao, lower-roman); /* 以小写罗马数字格局示意以后计数器zhaodao的值 */

你还能够应用counters()进行级联计数，应用语法counter(name, string)，其中string为字符串，必须值，代表计数序号的连贯字符串。能够实现相似1-1,1-2的成果，其中的strting为-。

<style>  .reset { padding-left: 20px; counter-reset: zhaodao; line-height: 1.6; color: #666; }  .counter:before { content: counters(zhaodao, '-') '. '; counter-increment: zhaodao; }</style><div class="reset">    <div class="counter">zhaodao1        <div class="reset">            <div class="counter">zhaodao1-1</div>            <div class="counter">zhaodao1-2                <div class="reset">                    <div class="counter">zhaodao1-2-1</div>                    <div class="counter">zhaodao1-2-2</div>                    <div class="counter">zhaodao1-2-3</div>                </div>            </div>            <div class="counter">zhaodao1-3</div>        </div>    </div>    <div class="counter">zhaodao2</div>    <div class="counter">zhaodao3        <div class="reset">            <div class="counter">zhaodao3-1</div>        </div>    </div></div>

成果如下：

list-item与counter()

列表项在定义的时候，会主动增加counter()计数器，就算你没有在样式表中应用counter，列表也会主动递增序号，而且与之相干的counter-increment等属性都会取默认值。

你能够通过li { counter-increment: list-item 2; }去扭转列表项递增值为2，也能够通过li { counter-increment: list-item 0; }去敞开列表项的递增。

<style>    li { counter-increment: list-item 2; }    li::marker { content: '(' counters(list-item,'.') ') '; }</style><ul>  <li>zhaodao88.com</li>  <li>zhaodao88.com</li>  <li>zhaodao88.com</li></ul>

成果如下：

counter与display:none与marker

一个元素，如果设置了display: none或者content: none，将不会生成标记块，counter-reset、counter-increment也不会有成果。然而设置visibility: hidden则不一样，依然会产生标记块，不会影响counter的属性。

content: none

<style>    li { counter-increment: list-item 2; }    li::marker { content: none; }</style><ul>  <li>zhaodao88.com</li>  <li>zhaodao88.com</li>  <li>zhaodao88.com</li></ul>

审查元素：不会生成marker标记块。

display: none

<style>    li { counter-increment: list-item 2; display: none}    li::marker { content: '(' counters(list-item,'.') ') '; }</style>

审查元素：也不会产生marker标记块。

visibility: hidden

<style>    li { counter-increment: list-item 2; visibility: hidden;}    li::marker { content: '(' counters(list-item,'.') ') '; }</style>

审查元素：marker标记块不受影响。

留神

对于有序列表<ol>设置counter的问题，目前发现一个浏览器兼容性bug，在chrome浏览器上<ol>的counter数字均比正常值多1，即以数字2开始！在Firefox没有这种问题。详情可见Bug出处：
https://bugs.chromium.org/p/c...
https://bugs.chromium.org/p/c...

<ol>    <li>zhaodao88.com    <li>zhaodao88.com    <li>zhaodao88.com    <li>zhaodao88.com</ol><style>    ol > li::marker { content: counters(list-item,'.') '.'; }</style>

总结

对于文中所提到的marker标记块，如果对它的概念不是很清晰，能够看CSS 列表模型之marker标记，外面很根底地介绍了标记块相干的常识。

本文纯属集体对规范文档浏览的一些整顿，不免疏漏，若有谬误，欢送底下留言斧正，一起探讨探讨。

参考

https://www.w3.org/TR/2020/WD...