乐趣区

关于css:CSS-列表模型之counter计数器

CSS 列表模型之 counter 计数器

计数器是一种非凡的数字跟踪器,通常用于为 CSS 列表项主动编号。你能够在我的项目中通过 counter-incrementcounter-setcounter-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-increment 1 次,计数值就加 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-resetcounter-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…

退出移动版