CSS計數(shù)器通過counter-reset、counter-increment和counter()實現(xiàn)自動編號，1. 在.document中定義counter-reset: section實現(xiàn)h2編號；2. 每個h2用counter-reset: subsection重置子級計數(shù)器；3. h3和h4分別通過counter-increment遞增並用::before插入層級編號；4. 使用counters(item, ".")可自動處理多層嵌套列表的編號，最終生成如1.、2.1、3.1.1等結(jié)構(gòu)化編號，完全由CSS控制無需JavaScript，適用於文檔章節(jié)或目錄佈局。

CSS 計數(shù)器（Counters）是一種在樣式中自動編號的機制，常用於自動生成章節(jié)號、有序列表、嵌套結(jié)構(gòu)編號等。它完全由CSS 控制，無需JavaScript。

下面是一個實用的CSS counters 示例，展示如何創(chuàng)建一個帶自動編號的多級標(biāo)題結(jié)構(gòu)（比如文檔的章節(jié)編號）。

? 基本語法回顧

• counter-reset ：創(chuàng)建或重置計數(shù)器
• counter-increment ：遞增計數(shù)器
• counter()或counters() ：顯示計數(shù)器值

? 示例：自動編號的章節(jié)標(biāo)題

HTML 結(jié)構(gòu)

<div class="document">
  <h2>Introduction</h2>
  <h2>Theory</h2>
  <h3>Basic Concepts</h3>
  <h3>Advanced Topics</h3>
  <h2>Practice</h2>
  <h3>Setup</h3>
  <h4>Step 1</h4>
  <h4>Step 2</h4>
  <h3>Testing</h3>
</div>

CSS 樣式

.document {
  counter-reset: section; /* 主計數(shù)器，用於h2 */
}

h2 {
  counter-reset: subsection; /* 每個h2 下重置h3 計數(shù)器*/
  counter-increment: section;
  counter-increment: subsection 0; /* 確保h3 在h2 後從1開始*/
}

h3 {
  counter-reset: subsubsection; /* 每個h3 下重置h4 計數(shù)器*/
  counter-increment: subsection;
}

h4 {
  counter-increment: subsubsection;
}

h2::before {
  content: counter(section) ". ";
  color: #0066cc;
  font-weight: bold;
  margin-right: 8px;
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
  color: #0066cc;
  font-weight: bold;
  margin-right: 8px;
}

h4::before {
  content: counter(section) "." counter(subsection) "." counter(subsubsection) " ";
  color: #0066cc;
  font-weight: bold;
  margin-right: 8px;
}

? 效果輸出

最終標(biāo)題會顯示為：

 1. Introduction
2. Theory
2.1 Basic Concepts
2.2 Advanced Topics
3. Practice
3.1 Setup
3.1.1 Step 1
3.1.2 Step 2
3.2 Testing

? 關(guān)鍵點說明

• counter-reset在父級元素上定義，子元素可以繼承並遞增自己的層級。
• counter-increment默認(rèn)1 ，可以指定值（如counter-increment: section 2; ）。
• ::before偽元素用來插入編號，不破壞HTML 結(jié)構(gòu)。
• 嵌套結(jié)構(gòu)中，每層都重置下一級計數(shù)器，保證編號獨立。
• 使用counters(separator)可簡化深層嵌套（見下擴展）。

? 擴展技巧：使用counters()簡化多層編號

如果你想自動處理任意深度的嵌套（比如無限層級的列表），可以用counters() ：

 ol {
  counter-reset: item;
}

li {
  counter-increment: item;
}

li::before {
  content: counters(item, ".") ". ";
  color: #d32f2f;
  font-weight: bold;
}

配合如下HTML：

 <ol>
  <li>Item 1
    <ol>
      <li>Subitem 1.1
        <ol>
          <li>Subsubitem 1.1.1</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Item 2</li>
</ol>

輸出：

 1. Item 1
  1.1. Subitem 1.1
    1.1.1. Subsubitem 1.1.1
2. Item 2

基本上就這些。 CSS counters 不復(fù)雜，但非常實用，尤其適合文檔類、目錄類佈局。關(guān)鍵是理解reset和increment的層級關(guān)係。

以上是CSS計數(shù)器示例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！