CSS counter() 函数

counter() 是一个 CSS 函数，用于在 CSS 中引用计数器的值。这个函数通常与 counter-reset 和 counter-increment 属性一起使用，以创建和增加文档中的计数器，然后在需要的地方引用这些计数器。

基本语法

counter() 函数的基本语法如下：

counter(name [, style])

• name：必需的参数，表示要引用的计数器的名称。
• style：可选的参数，指定计数器值的显示格式。它可以是以下几种值之一：
  • decimal：十进制数字 (1, 2, 3, ...)
  • lower-roman：小写罗马数字 (i, ii, iii, iv, v, ...)
  • upper-roman：大写罗马数字 (I, II, III, IV, V, ...)
  • lower-alpha：小写字母 (a, b, c, ...)
  • upper-alpha：大写字母 (A, B, C, ...)

示例

创建计数器

首先，你需要定义一个计数器，并通过 counter-reset 属性设置初始值：

ol {
    counter-reset: section;
}

上述代码会在每个 <ol> 元素中创建一个名为 section 的计数器，并将其初始值设为 0。

增加计数器

接下来，使用 counter-increment 属性来增加计数器的值：

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

在这个例子中，每当遇到一个 <li> 元素时，计数器 section 就会增加 1，并且在 <li> 前面插入计数器的当前值。

引用计数器

最后，通过 counter() 函数来引用计数器的值：

li:before {
    content: counter(section);
}

这里，counter(section) 函数返回当前计数器的值，并将其作为 content 属性的值插入到 <li> 元素之前。

不同的计数器风格

除了默认的十进制计数器外，还可以使用不同的样式来显示计数器值。这可以通过在 counter() 函数中添加第二个参数来实现：

li:before {
    content: counter(section, upper-roman) " ";
}

上面的代码将使计数器的值显示为大写的罗马数字。

嵌套计数器

有时候，你需要在嵌套列表中使用计数器。在这种情况下，可以使用 counters() 函数，它允许你在父级和子级之间分隔计数器值：

// www.javascriptcn.com code example
ol {
    counter-reset: item;
}

li {
    counter-increment: item;
}

li:before {
    content: counters(item, ".") " ";
}

在这个示例中，计数器 item 在每个 <li> 元素上递增，并且使用点号（.）作为分隔符。这样，子列表项的计数器会以父列表项的计数器值为前缀，形成嵌套效果。

总结

counter() 函数是 CSS 中一个强大的工具，可用于创建和引用计数器值。结合 counter-reset 和 counter-increment 属性，可以轻松地为页面上的元素创建编号或序号。通过调整计数器的样式和使用嵌套计数器，可以使复杂的列表结构更加清晰易读。