CSS3 高级特性 - counter-reset 属性

1. 什么是 counter-reset 属性？

counter-reset 属性用于创建或重置 CSS 计数器，它是 CSS 计数器系统的重要组成部分。CSS 计数器允许你创建自定义的自动编号系统，可以用于章节编号、列表编号、步骤编号等各种需要自动递增数字的场景。

2. counter-reset 的语法

counter-reset: [计数器名称] [初始值];

2.1 取值说明

  • 计数器名称：自定义的计数器名称，用于在其他地方引用该计数器
  • 初始值：可选，计数器的初始值，默认为 0

你也可以同时重置多个计数器：

counter-reset: 计数器1 初始值1 计数器2 初始值2 ...;

3. 核心知识点

3.1 CSS 计数器系统

CSS 计数器系统由三个主要部分组成：

  1. counter-reset：创建或重置计数器
  2. counter-increment：递增计数器的值
  3. **counter() 或 counters()**：在内容中显示计数器的值

3.2 counter-reset 的作用

counter-reset 属性的主要作用是：

  • 创建一个新的计数器
  • 重置已存在的计数器的值
  • 为计数器设置初始值

3.3 计数器的作用域

计数器的作用域是从设置 counter-reset 的元素开始，到该元素的结束标签为止。在这个作用域内，计数器可以被递增和使用。

3.4 嵌套计数器

CSS 支持嵌套计数器，这意味着你可以在一个计数器的作用域内创建另一个计数器，例如：

  • 章节编号：1, 1.1, 1.2, 2, 2.1, 2.2 等
  • 列表编号：1, a, i, 2, a, i 等

4. 实用案例

4.1 基本计数器示例

HTML 结构：

<div class="counter-container">
  <h2>项目列表</h2>
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
</div>

CSS 样式：

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

.item {
  counter-increment: item-counter;
  margin-bottom: 10px;
}

.item::before {
  content: "项目 " counter(item-counter) ": ";
  font-weight: bold;
  color: #333;
}

4.2 章节编号

HTML 结构：

<div class="document">
  <h1>文档标题</h1>
  <section>
    <h2>第一章</h2>
    <p>第一章内容...</p>
    <section>
      <h3>第一节</h3>
      <p>第一节内容...</p>
      <section>
        <h4>第一小节</h4>
        <p>第一小节内容...</p>
      </section>
    </section>
  </section>
  <section>
    <h2>第二章</h2>
    <p>第二章内容...</p>
  </section>
</div>

CSS 样式：

.document {
  counter-reset: chapter;
}

h2 {
  counter-reset: section;
  counter-increment: chapter;
}

h2::before {
  content: counter(chapter) ". ";
}

h3 {
  counter-reset: subsection;
  counter-increment: section;
}

h3::before {
  content: counter(chapter) "." counter(section) ". ";
}

h4 {
  counter-increment: subsection;
}

h4::before {
  content: counter(chapter) "." counter(section) "." counter(subsection) ". ";
}

4.3 自定义列表编号

HTML 结构：

<ul class="custom-list">
  <li>项目 1</li>
  <li>项目 2
    <ul>
      <li>子项目 2.1</li>
      <li>子项目 2.2
        <ul>
          <li>孙项目 2.2.1</li>
          <li>孙项目 2.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>项目 3</li>
</ul>

CSS 样式：

.custom-list {
  counter-reset: list-counter;
  list-style-type: none;
  padding-left: 20px;
}

.custom-list > li {
  counter-increment: list-counter;
  margin-bottom: 10px;
}

.custom-list > li::before {
  content: counter(list-counter) ". ";
  font-weight: bold;
  color: #333;
}

.custom-list ul {
  counter-reset: sublist-counter;
  list-style-type: none;
  padding-left: 20px;
  margin-top: 5px;
}

.custom-list ul > li {
  counter-increment: sublist-counter;
  margin-bottom: 5px;
}

.custom-list ul > li::before {
  content: counter(list-counter) "." counter(sublist-counter) ". ";
  font-weight: bold;
  color: #666;
}

.custom-list ul ul {
  counter-reset: subsublist-counter;
}

.custom-list ul ul > li {
  counter-increment: subsublist-counter;
}

.custom-list ul ul > li::before {
  content: counter(list-counter) "." counter(sublist-counter) "." counter(subsublist-counter) ". ";
  font-weight: bold;
  color: #999;
}

4.4 步骤编号

HTML 结构：

<div class="steps-container">
  <h2>操作步骤</h2>
  <div class="step">准备材料</div>
  <div class="step">开始操作</div>
  <div class="step">完成收尾</div>
</div>

CSS 样式：

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

.step {
  counter-increment: step-counter;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-left: 4px solid #333;
  position: relative;
}

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

4.5 表格行编号

HTML 结构：

<table class="numbered-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>产品 A</td>
      <td>¥100</td>
    </tr>
    <tr>
      <td></td>
      <td>产品 B</td>
      <td>¥200</td>
    </tr>
    <tr>
      <td></td>
      <td>产品 C</td>
      <td>¥300</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);
}

5. 浏览器兼容性

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

6. 最佳实践

  1. 选择有意义的计数器名称：使用描述性的计数器名称，如 chapter、section、step 等，使代码更易读

  2. 合理设置初始值：根据需要设置计数器的初始值，例如从 1 开始而不是默认的 0

  3. 注意计数器的作用域：了解计数器的作用域规则，避免计数器值混乱

  4. 使用嵌套计数器：对于复杂的编号系统，如章节编号，使用嵌套计数器

  5. 结合 content 属性：使用 ::before 或 ::after 伪元素和 content 属性来显示计数器的值

7. 代码优化建议

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

  2. 使用简洁的语法：当只需要一个计数器时，使用简洁的语法

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

  4. 测试不同浏览器：不同浏览器对计数器的支持可能存在细微差异，特别是在复杂的嵌套场景中

  5. 结合 CSS 变量：可以考虑使用 CSS 变量来存储计数器的初始值或其他相关值，增加代码的可维护性

8. 总结

counter-reset 属性是 CSS3 中一个非常实用的高级特性，它是 CSS 计数器系统的重要组成部分。通过使用 counter-reset、counter-increment 和 counter()/counters() 函数，你可以创建各种自定义的自动编号系统，如章节编号、列表编号、步骤编号等。CSS 计数器提供了一种灵活、强大的方式来实现自动编号，无需使用 JavaScript 即可完成。

9. 练习

  1. 练习 1：创建一个带有自动编号的章节结构，包括章、节、小节三级编号

  2. 练习 2：创建一个自定义的有序列表，使用不同的编号样式（如数字、字母、罗马数字）

  3. 练习 3：创建一个步骤指南，每个步骤都有自动编号和视觉指示

  4. 练习 4：创建一个表格，自动为每行添加序号

10. 相关资源

« 上一篇 CSS3 高级特性 - text-orientation 属性 下一篇 » CSS3 高级特性 - counter-increment 属性
↑