CSS计数器及其应用

发表于 | 分类于

假设您有一个未知数量的 div 元素，并且(出于某种原因)您想要计算它们的数量，并自动为它们彼此编号——您将如何做到这一点？您的第一个想法可能是使用Javascript来处理DOM。其实你完全可以用CSS来做。

CSS计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。CSS 计数器使用到以下几个属性：

  • counter-reset - 创建或者重置计数器
  • counter-increment - 递增变量
  • content - 插入生成的内容
  • counter() 或 counters() 函数 - 将计数器的值添加到元素

自动编号HTML元素

要使用 CSS 计数器，得先用 counter-reset 创建计数器，如下：

1
2
3
4
5
6
7
8
.demo {
  counter-reset: section;
}

.demo div:before {
  counter-increment: section;
  content: "section " counter(section);
}

1
2
3
4
5
<div class="demo">
  <div></div>
  <div></div>
  <div></div>
</div>

渲染结果如下：

section 1
section 2
section 3

可以在计数器名称后面使用指定初始编号，如下：

1
2
3
4
5
6
7
8
.demo {
  counter-reset: section -1;
}

.demo div:before {
  counter-increment: section;
  content: "section " counter(section);
}

此时，渲染结果如下：

section 0
section 1
section 2

嵌套计数器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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)"、";
}

1
2
3
4
5
6
7
8
9
10
11
<h1>HTML教程</h1>
<h2>简介</h2>
<h2>编辑器</h2>

<h1>CSS教程</h1>
<h2>简介</h2>
<h2>语法</h2>

<h1>JavaScript教程</h1>
<h2>简介</h2>
<h2>用法</h2>

渲染结果如下：

Section 1 - HTML教程
1.1、简介
1.2、编辑器
Section 2 - CSS教程
2.1、简介
2.2、语法
Section 3 - JavaScript教程
3.1、简介
3.2、用法

计数器也可用于列表中，列表的子元素会自动创建。这里我们需要使用 counters() 函数在不同的嵌套层级中插入字符串:

1
2
3
4
5
6
7
8
9
ol {
  counter-reset: section;
  list-style-type: none;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ol>
  <li>item</li>
  <li>item   
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

渲染结果如下：

1 item
2 item

2.1 item
2.2 item
2.3 item

2.3.1 item
2.3.2 item
2.3.3 item

2.4 item

3 item
4 item