CSS SNIPPET

  返回

使用CSS计数器  视觉效果其他

计数器本质上是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, '.') ' ';
}
效果演示
  • List item
  • List item
  • List item
    • List item
    • List item
    • List item
代码说明
  • 你可以使用任何类型的HTML元素创建一个有序列表。
  • counter-reset 初始化一个计数器,值就是计数器的名称。计数器默认初始值为0。 也可以使用这个属性将计数器设置为任意数值。
  • 元素使用的counter-increment是可计数的。一旦counter-reset初始化, 就可以增加或减小计数器的值。
  • counter(name, style) 显示计数器的值,通常用于content属性。 这个函数可以接收两个参数:第一个是计数器名称,第二个可以是 decimalupper-roman (默认是decimal )。
  • counters(counter, string, style) 显示计数器的值,通常用于content 属性。 这个函数可以接收三个参数:第一个是计数器名称,第二个是计数器值之后要显示的字符串, 第三个是decimalupper-roman (默认是decimal )。
  • CSS计数器对制作概要列表尤其有用,因为在子元素中会自动创建计数器的新实例。 使用counters() 函数可以在不同层级的嵌套计数器间插入不同的文本。
浏览器支持

100.0%