CSS 计数器

CSS 计数器

CSS 计数器可让你根据内容在文档中的位置调整其显示的外观。例如，你可以使用计数器自动为网页中的标题编号，或者更改有序列表的编号。

本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则跟踪使用次数以递增或递减。你可以自定义一个计数器，也可以修改 list-item 这一默认生成的应用于所有有序列表的计数器。

CSS 计数器基本概念

如果仅仅增加一个 Title，大家都知道通过伪元素(:before或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。

自动编号在 CSS 2.1 中是通过两个属性控制的，‘counter-increment’和’counter-reset’。通过这些属性定义的计数器用于’content’属性的 counter() 和 counters() 函数

基本使用

至于这两个属性怎么用，查手册？我觉得不如咱先看下代码，比看一大段描述文字来的直观的多，先看最简单的一个应用：

举例说明, html:

<h6>HTML and CSS</h6>
<h6>JavaScript</h6>
<h6>PHP</h6>
<h6>Java</h6>

css:

body {
  /* 重置计数器成 0 */
  counter-reset: section;
}
h6:before {
  /* 增加计数器值 */
  counter-increment: section;
  /* 显示计数器 */
  content: "Section " counter(section) ": ";
}

计数器样式

通常情况下，计数器默认是用阿拉伯数字来表示的，当然，我们也可以用其他计数器样式，上头代码里那个counter()函数还可以传入样式参数：

counter( counter_name, list_style_type )

在这里：

• counter_name： 当然指的就是counter-reset中定义的计数器变量。
• list_style_type: 计数器显示样式，可以是css中允许的任何 list-style-type 的值，当然也包括 disc, circle, square 或者 none。

嵌套计数器

以下实例在页面创建一个计数器，在每一个 “h1” 元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在 “h2” 元素的前面，内容为 “<主标题计数值>.<副标题计数值>”:
举例说明:

body {
  counter-reset: section;
}
 
h1 {
  counter-reset: subsection;
}
 
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
 
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}