Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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 个参数,第一个参数为计数器的名称,第二个参数为 decimalupper-roman(默认为 decimal
  4. counters(counter, string, style) 展现一个节点中计数器的值。通常作为 content 的属性值。这个函数可以接受 3 个参数,第一个参数为计数器的名称,第二个参数可以包含一个紧接在数值后的字符串 ,第三个参数为 decimalupper-roman(默认为 decimal
  5. CSS 计数器对制作大纲列表尤其有用,因为在子元素中会自动初始化一个新的计数器。使用 counters() 函数,可以在不同级别的嵌套计数器之间插入分隔文本

浏览器支持

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

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步