CSS Counter

CSS计数器可以让内容基于它在文档中的位置有不同的表现,例如可以使用计数器来为页面的标题自动编号。计数器本质是CSS维护的变量,依据CSS规则进行递增来记录使用次数。

相关属性

counter-reset: name [default] 重置计数器为指定值,默认为0

counter-reset: name;
counter-reset: name 1;
counter-reset: name1 1 name2 3;
counter-reset: none | inherit | initial | unset;

counter-increment: name [delta] 将计数器增加给定值,默认为1

counter-increment: name 2;

counter(name [, counter-style ]) 返回指定计数器的当前值,通常和伪元素的content属性一起使用

counters(name, string [, counter-style ]) 嵌套计数器,返回计数器当前值的连接字符串

counter-style可以是计数器样式名称(可以是预定义或者自定义样式的名称,参考 list-style-type - CSS: Cascading Style Sheets | MDN CSS Counter Styles - CSS: Cascading Style Sheets | MDN)或者symbols函数(参考symbols() - CSS: Cascading Style Sheets | MDN

使用CSS计数器可以很方便的自定义列表样式

ul {
  counter-reset: list;
  list-style-type: none;
}
li {
  counter-increment: list;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
li:before {
  content: counter(list);
  margin-right: 2px;
  width: 20px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  background: #eee;
}

嵌套列表索引

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

Codepen上一些相关的demo

相关阅读
Using CSS counters - CSS: Cascading Style Sheets | MDN

Comments
Write a Comment