CSS 其他 - 计数器

2019-08-23

描述

计数器本质上是由 CSS 维护的变量，他的值可以通过 CSS 跟踪元素被使用的次数规则来进行递增。

HTML

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

CSS

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

Demo

说明

你可以使用 HTML 的任何标签来创建一个有序的列表。

1. counter-reset 初始化一个计数器，其值为计数器的名称。默认情况下，从 0 开始进行计数。此属性还可将默认值修改为任意指定的数字
2. counter-increment 让元素开始计数。一旦使用 counter-reset 进行初始化后，这个计数器的值就开始自增或自减
3. counter(name, style) 展现一个节点中计数器的值。通常作为 content 的属性值。这个函数可以接受 2 个参数，第一个参数为计数器的名称，第二个参数为 decimal 或 upper-roman（默认为 decimal）
4. counters(counter, string, style) 展现一个节点中计数器的值。通常作为 content 的属性值。这个函数可以接受 3 个参数，第一个参数为计数器的名称，第二个参数可以包含一个紧接在数值后的字符串 ，第三个参数为 decimal 或 upper-roman（默认为 decimal）
5. CSS 计数器对制作大纲列表尤其有用，因为在子元素中会自动初始化一个新的计数器。使用 counters() 函数，可以在不同级别的嵌套计数器之间插入分隔文本

浏览器支持

支持率：99.9%
支持情况：https://caniuse.com/#feat=css-counters

返回总目录

每天 30 秒系列之 CSS