CSS3 高级特性 - counter() 函数

1. 什么是 counter() 函数？

counter() 函数是 CSS3 中用于在内容中显示计数器值的函数，它是 CSS 计数器系统的重要组成部分。与 counter-reset 和 counter-increment 属性配合使用，counter() 函数可以在元素的内容中显示计数器的当前值，实现各种自动编号效果。

2. counter() 函数的语法

counter(name, style);

2.1 参数说明

  • name：必需，要显示的计数器名称，必须是已经通过 counter-reset 创建的计数器
  • style：可选，计数器的显示样式，默认为 decimal（十进制数字）

2.2 支持的样式

counter() 函数支持以下样式：

  • decimal：十进制数字（1, 2, 3, ...）
  • decimal-leading-zero：带前导零的十进制数字（01, 02, 03, ...）
  • lower-roman：小写罗马数字（i, ii, iii, ...）
  • upper-roman：大写罗马数字（I, II, III, ...）
  • lower-alpha / lower-latin：小写字母（a, b, c, ...）
  • upper-alpha / upper-latin：大写字母（A, B, C, ...）
  • lower-greek：小写希腊字母（α, β, γ, ...）
  • binary：二进制数字（1, 10, 11, ...）
  • octal：八进制数字（1, 2, 3, ..., 7, 10, ...）
  • hexadecimal：十六进制数字（1, 2, 3, ..., 9, a, b, ...）

3. 核心知识点

3.1 counter() 函数的作用

counter() 函数的主要作用是：

  • 在元素的内容中显示计数器的当前值
  • 控制计数器的显示样式
  • 可以与其他文本组合使用
  • 通常与 ::before 或 ::after 伪元素配合使用

3.2 与 CSS 计数器系统的关系

counter() 函数是 CSS 计数器系统中的第三个核心部分：

  • counter-reset：创建或重置计数器，设置初始值
  • counter-increment：递增计数器的值
  • **counter()**：在内容中显示计数器的值

3.3 counter() 函数的使用场景

counter() 函数主要用于以下场景：

  1. 自动编号：为列表、章节、步骤等添加自动编号
  2. 自定义列表样式：创建自定义的列表编号样式
  3. 多级编号：创建如 1.1, 1.2, 2.1 这样的多级编号
  4. 特殊编号样式：使用罗马数字、字母等特殊编号样式

3.4 与 counters() 函数的区别

counter() 函数与 counters() 函数的主要区别：

  • **counter()**：显示单个计数器的值，适用于单级编号
  • **counters()**：显示嵌套计数器的值，适用于多级编号，如 1.1, 1.2.1 等

4. 实用案例

4.1 基本计数器显示

HTML 结构：

<div class="counter-container">
  <h2>购物清单</h2>
  <div class="item">牛奶</div>
  <div class="item">鸡蛋</div>
  <div class="item">面包</div>
  <div class="item">水果</div>
</div>

CSS 样式：

.counter-container {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

.item::before {
  content: counter(item-counter) ". ";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #333;
}

4.2 自定义计数器样式

HTML 结构：

<div class="styled-counter">
  <h2>任务列表（罗马数字）</h2>
  <div class="task">完成 CSS 教程</div>
  <div class="task">复习 JavaScript</div>
  <div class="task">学习 React</div>
</div>

CSS 样式：

.styled-counter {
  counter-reset: task-counter;
}

.task {
  counter-increment: task-counter;
  margin-bottom: 10px;
  padding-left: 40px;
  position: relative;
}

.task::before {
  content: "任务 " counter(task-counter, upper-roman) ": ";
  position: absolute;
  left: 0;
  font-weight: bold;
  color: #333;
}

4.3 多级章节编号

HTML 结构：

<div class="document">
  <h1>CSS 参考手册</h1>
  <section>
    <h2>选择器</h2>
    <p>选择器内容...</p>
    <section>
      <h3>基础选择器</h3>
      <p>基础选择器内容...</p>
    </section>
    <section>
      <h3>高级选择器</h3>
      <p>高级选择器内容...</p>
    </section>
  </section>
  <section>
    <h2>布局</h2>
    <p>布局内容...</p>
  </section>
</div>

CSS 样式：

.document {
  counter-reset: chapter;
}

/* 递增章节计数器，重置 section 计数器 */
h2 {
  counter-reset: section;
  counter-increment: chapter;
  margin-top: 30px;
}

/* 显示章节编号 */
h2::before {
  content: counter(chapter) ". ";
  font-weight: bold;
  color: #333;
}

/* 递增 section 计数器 */
h3 {
  counter-increment: section;
  margin-top: 20px;
  margin-left: 20px;
}

/* 显示 section 编号 */
h3::before {
  content: counter(chapter) "." counter(section) ". ";
  font-weight: bold;
  color: #666;
}

4.4 表格行编号

HTML 结构：

<table class="numbered-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td></td>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td></td>
      <td>王五</td>
      <td>35</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

CSS 样式：

.numbered-table {
  counter-reset: row-counter;
  border-collapse: collapse;
  width: 100%;
}

.numbered-table th,
.numbered-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.numbered-table th {
  background-color: #f5f5f5;
}

/* 递增行计数器 */
.numbered-table tbody tr {
  counter-increment: row-counter;
}

/* 显示行编号 */
.numbered-table tbody tr td:first-child::before {
  content: counter(row-counter, decimal-leading-zero);
}

4.5 步骤指示器

HTML 结构：

<div class="steps-container">
  <h2>注册流程</h2>
  <div class="step">填写基本信息</div>
  <div class="step">验证邮箱</div>
  <div class="step">设置密码</div>
  <div class="step">完成注册</div>
</div>

CSS 样式：

.steps-container {
  counter-reset: step-counter;
}

.step {
  counter-increment: step-counter;
  margin-bottom: 20px;
  padding: 15px 20px 15px 60px;
  background-color: #f5f5f5;
  border-radius: 5px;
  position: relative;
}

.step::before {
  content: counter(step-counter);
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #333;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

4.6 结合其他文本使用

HTML 结构：

<div class="combined-counter">
  <h2>FAQ 常见问题</h2>
  <div class="question">如何学习 CSS？</div>
  <div class="answer">可以通过在线教程、书籍和实践项目学习 CSS。</div>
  <div class="question">CSS 有哪些版本？</div>
  <div class="answer">CSS 有 CSS1、CSS2、CSS3 等版本，目前正在发展 CSS4。</div>
  <div class="question">如何优化 CSS 性能？</div>
  <div class="answer">可以通过减少选择器复杂度、使用 CSS 预处理器、压缩 CSS 等方式优化性能。</div>
</div>

CSS 样式：

.combined-counter {
  counter-reset: question-counter;
}

.question {
  counter-increment: question-counter;
  margin-top: 20px;
  font-weight: bold;
  font-size: 16px;
}

.question::before {
  content: "问题 " counter(question-counter, upper-alpha) ": ";
  color: #333;
}

.answer {
  margin-left: 20px;
  margin-top: 5px;
  color: #666;
}

5. 浏览器兼容性

浏览器 支持情况
Chrome 1+
Firefox 1+
Safari 1+
Edge 12+

6. 最佳实践

  1. 与 ::before 或 ::after 配合使用：counter() 函数通常与 ::before 或 ::after 伪元素配合使用，在元素前或元素后添加编号

  2. 选择合适的计数器样式：根据内容类型选择合适的计数器样式，如章节编号使用 decimal，列表使用 lower-alpha 等

  3. 结合其他文本：counter() 函数可以与其他文本组合使用，创建更有意义的编号，如 "步骤 1:"、"问题 A:" 等

  4. 注意计数器的作用域：了解计数器的作用域规则，确保计数器在正确的范围内递增和显示

  5. 使用多级编号：对于复杂的文档结构，使用 counter() 函数创建多级编号，如 1.1, 1.2, 2.1 等

7. 代码优化建议

  1. 避免过度使用：只在需要自动编号的场景中使用计数器，不要过度使用

  2. 使用简洁的语法：当只需要基本的十进制编号时，使用简洁的语法，省略 style 参数

  3. 考虑性能：虽然 counter() 函数对性能影响很小，但在大量元素的情况下，需要注意优化

  4. 测试不同浏览器：不同浏览器对 counter() 函数的支持可能存在细微差异，特别是在使用特殊样式时

  5. 结合 CSS 变量：可以考虑使用 CSS 变量来存储计数器名称或样式，增加代码的可维护性

8. 总结

counter() 函数是 CSS3 中一个非常实用的高级特性，它是 CSS 计数器系统的重要组成部分。通过与 counter-reset 和 counter-increment 属性配合使用，counter() 函数可以在内容中显示计数器的值，实现各种自动编号效果。counter() 函数支持多种显示样式，可以创建从简单的数字编号到复杂的罗马数字、字母编号等各种效果，为开发者提供了强大的自动编号工具。

9. 练习

  1. 练习 1：创建一个带有自动编号的购物清单，使用 decimal 样式

  2. 练习 2：创建一个 FAQ 页面，使用 upper-alpha 样式为问题编号

  3. 练习 3：创建一个多级章节编号系统，使用 counter() 函数显示章节和小节编号

  4. 练习 4：创建一个步骤指示器，使用 counter() 函数和圆形背景显示步骤编号

10. 相关资源

« 上一篇 CSS3 高级特性 - counter-increment 属性 下一篇 » CSS3 高级特性 - counters() 函数
↑