HTML5与CSS3基础语法自学教程（二十二）

最新推荐文章于 2025-12-27 07:42:47 发布

原创最新推荐文章于 2025-12-27 07:42:47 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #前端 #html #css

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！

导读：本小节讲解 CSS 中的计数器，其中包含了计数器的概念，以及计数器中所包含的属性和函数等内容。计数器的应用场景主要集中在复杂编号的列表中，但涉及内容比较难懂。

什么是计数器

CSS 中的计数器本质上来说就是由 CSS 维护的变量，计数器的值可以通过 CSS 规则递增来跟踪计数器的使用次数，例如可以使用计数器来自动为网页中的标题编号。

简单来说，有序列表就是一个比较简单的计数器，但计数器可以实现编号更为复杂的情况。如下示例代码展示了 CSS 中的计数器的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>计数器示例</title>
  <style>
    #demo ol {
      counter-reset: section;
      list-style-type: none;
    }

    #demo ol li {
      counter-increment: section;
    }

    #demo ol li:before {
      content: counters(section, ".") ". ";
    }
  </style>
</head>

<body>
  <div id="demo">
    <ol>
      <li>进风口的爽肤水
        <ol>
          <li>非进口商的</li>
          <li>非进口商的</li>
          <li>非进口商的</li>
        </ol>
      </li>
      <li>进风口的爽肤水
        <ol>
          <li>非进口商的</li>
          <li>
            非进口商的
            <ol>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
              <li>将咖啡色的开发商</li>
            </ol>
          </li>
          <li>非进口商的</li>
        </ol>
      </li>
      <li>进风口的爽肤水</li>
    </ol>
  </div>
</body>

</html>

上述示例代码运行效果如下图所示：

03-01.png

提示：上述示例代码仅做展示作用，不需要掌握。有关计数器的内容后续会详细讲解。

如上述示例所示，操作计数器的值是通过如下 2 个属性实现：

counter-reset 属性
counter-increment 属性

在 HTML 页面中显示计数器是通过如下 2 个函数实现：

counter() 函数
counters() 函数

counter-reset 属性

CSS counter-reset 属性用来将计数器重置为给定的值。该属性的默认值为 none，其值的类型具有如下 3 种情况：

要重置为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
要在元素每次出现时将计数器重置为的值。如果没有指定，默认值为 0。
none：不执行计数器复位。

如下示例代码展示了 counter-reset 属性为 none 值的情况：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>counter-reset属性</title>
  <style>
    #chapters {
      counter-reset: chapter-count;
    }

    h2 {
      counter-increment: chapter-count;
      font-size: 1em;
    }

    h2::before {
      content: "Chapter "counter(chapter-count) ": ";
    }

    #example-element {
      background-color: #add8e6;
      counter-reset: none;
    }
  </style>
</head>

<body>
  <div id="chapters">
    <h2>什么是计数器</h2>
    <h2 id="example-element">coutner-reset属性</h2>
    <h2>counter-increment属性</h2>
    <h2>counter()和counters()函数</h2>
  </div>
</body>

</html>

上述示例代码运行效果如下图所示：

03-02.png

如上图所示，当 counter-reset 属性的值为 none 值时，计数器没有执行复位，而是继续增加操作。如果将 counter-reset 属性值设置为 chapter-count 的话，会如下图所示：

03-03.png

如上图所示，当 counter-reset 属性值为 chapter-count 时，会将计数器重新复位为 0。这种情况下，与将 counter-reset 属性值为 chapter-count 0 的情况是相同的。

如果将 counter-reset 属性值设置为 chapter-count 5 的话，会如下图所示：

03-04.png

如上图所示，当 counter-reset 属性值设置为 chapter-count 5 时，会将计数器重新复位为 5。

注意：counter-reset 属性必须配合 counter() 函数和 counter-increment 属性使用。

计数器的个数不一定是一个，也可以是多个。如果 counter-reset 属性的值是多个计数器的话，则计数器之间使用空格分隔。如下示例代码展示了 counter-reset 属性设置多个计数器：

h1 {
  counter-reset: chapter section 1 page;
}

上述示例代码的含义是：

将 chapter 和 page 两个计数器复位为 0。
将 section 计数器复位为 1。

counter-increment 属性

CSS counter-increment 属性用来设置计数器每次增加的值。该属性的默认值为 none，其值的类型具有如下 3 种情况：

要增加为计数器的名称。该名称可以是字母（A-Z，a-z）、十进制数字（0-9）、连接符（-）、下划线（_）以及转义字符。
要在元素每次出现时将计数器增加为的值。如果没有指定，默认值为 1。
none：任何计数器都不能递增。

如下示例代码展示了 counter-increment 属性为 none 值的情况：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>counter-increment属性</title>
  <style>
    #chapters {
      counter-reset: chapter-count;
    }

    h2 {
      counter-increment: none;
      font-size: 1em;
    }

    h2::before {
      content: "Chapter "counter(chapter-count) ": ";
    }
  </style>
</head>

<body>
  <div id="chapters">
    <h2>什么是计数器</h2>
    <h2 id="example-element">coutner-reset属性</h2>
    <h2>counter-increment属性</h2>
    <h2>counter()和counters()函数</h2>
  </div>
</body>

</html>

上述示例代码运行效果如下图所示：

03-05.png

如上图所示，当 counter-increment 属性值为 none 值时，计数器没有任何递增。而当 counter-increment 属性值为 chapter-count 时，会如下图所示：

03-06.png

如上图所示，当 counter-increment 属性值为 chapter-count 时，计数器每次递增为 1。与将 counter-increment 属性值设置为 chapter-count 1 是相同的。

如果将 counter-increment 属性值设置为 chapter-count 5 的话，则如下图所示：

03-07.png

如上图所示，当 counter-increment 属性值为 chapter-count 5 时，计数器每次递增为 5。

说明：如果将 counter-increment 属性值设置为 chapter-count -1 则表示递减。

如果 counter-increment 属性设置多个计数器的递增值的话，计数器之间使用空格进行分隔。如下示例代码展示了 counter-increment 属性设置多个计数器：

h1 {
  counter-increment: chapter section 2 page;
}

上述示例代码的含义是：

将 chapter 和 page 两个计数器递增为 1。
将 section 计数器递增为 2。

counter() 函数

CSS counter() 函数用来简单地将计数器的内容显示在 HTML 页面中。counter() 函数返回一个字符串，该字符串表示指定的计数器的当前值。

counter() 函数的语法结构如下所示：

conter(custom-ident, counter-style)

上述语法结构具体说明如下：

custom-ident 参数：表示计数器的名称。
counter-style 参数：表示显示的样式。

如下示例代码展示了 counter() 函数的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>counter()函数</title>
  <style>
    ol {
      counter-reset: listCounter;
    }

    li {
      counter-increment: listCounter;
    }

    li::after {
      content: "["counter(listCounter) "] == ["
        counter(listCounter, upper-roman) "]";
    }
  </style>
</head>

<body>
  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</body>

</html>

上述示例代码运行效果如下图所示：

03-08.png

counter() 函数经常与 ::before 和 ::after 伪元素选择器配合使用。

counters() 函数

CSS counters() 函数支持计数器的嵌套情况。counters() 函数返回一个字符串，该字符串表示指定的计数器的当前值。

counters() 函数的语法结构如下所示：

conter(custom-ident, string, counter-style)

上述语法结构具体说明如下：

custom-ident 参数：表示计数器的名称。
string 参数：表示计数器嵌套的分隔符，可以是任意数量的文本字符。
counter-style 参数：表示显示的样式。

如下示例代码展示了 counters() 函数的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>counters()函数</title>
  <style>
    ol {
      counter-reset: listCounter;
    }

    li {
      counter-increment: listCounter;
    }

    li::marker {
      content: counters(listCounter, '.', upper-roman) ') ';
    }

    li::before {
      content: counters(listCounter, ".") " == "counters(listCounter, ".", lower-roman);
    }
  </style>
</head>

<body>
  <ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

上述示例代码运行效果如下图所示：