CSS的counter-reset和counter-increment用於自動(dòng)編號(hào)HTML元素。 1. 使用counter-reset初始化或重置計(jì)數(shù)器，例如section { counter-reset: sub-section;}創(chuàng)建名為sub-section的計(jì)數(shù)器；2. 通過(guò)counter-increment遞增計(jì)數(shù)器，如h3 { counter-increment: sub-section;}使每個(gè)h3標(biāo)題編號(hào)遞增；3. 使用content屬性結(jié)合偽元素顯示計(jì)數(shù)器，如h3::before { content: counter(section) "." counter(sub-section);}實(shí)現(xiàn)嵌套編號(hào)。這些功能適用於自動(dòng)生成標(biāo)題編號(hào)、自定義列表樣式、多級(jí)編號(hào)及UI進(jìn)度指示等場(chǎng)景，無(wú)需JavaScript即可完成複雜佈局邏輯。

If you've ever wanted to automatically number headings, list items, or sections in your HTML using just CSS, counter-reset and counter-increment are the tools you need. These properties let you create and manipulate counters directly in your stylesheets — no JavaScript required.

What Are Counters in CSS?

At their core, CSS counters are variables maintained by the browser that can be incremented and displayed. They're especially useful for things like numbered headings, ordered lists, or multi-level numbering (like 1.1, 1.2, 2.1, etc.).

You don't declare them like variables in JavaScript. Instead, you "initialize" them with counter-reset and "update" them with counter-increment .

How to Use counter-reset

The counter-reset property is used to create a new counter or reset an existing one to a specific value (default is 0).

For example:

 section {
  counter-reset: sub-section;
}

This creates a counter called sub-section and resets it every time a new section starts — which is perfect for nested numbering.

You can also set it to start at a different number:

 section {
  counter-reset: sub-section 5;
}

Now, the first sub-section inside this section will start at 6 (because counter-increment typically adds 1 by default).

A few things to keep in mind:

• Counters are scoped to the element they're defined on and its children.
• You can define multiple counters in one declaration:

   counter-reset: section 0 sub-section 0;

How to Use counter-increment

Once a counter exists, you use counter-increment to increase its value . This is usually applied to elements that should trigger a number change — like subsections or list items.

Example:

 h3 {
  counter-increment: sub-section;
}

Each time an h3 appears inside a parent that has a sub-section counter, it increases that counter by 1.

Like counter-reset , you can increment multiple counters at once:

 h2 {
  counter-increment: section sub-section 2;
}

Here, section increases by 1, and sub-section jumps up by 2.

Important note: By default, counter-increment increases by 1 unless specified otherwise.

Displaying Counters with content

Creating and updating counters isn't enough — you also need to show them. That's where the content property comes in, often used with ::before or ::after pseudo-elements.

Example:

 h3::before {
  content: "Section " counter(sub-section) ": ";
}

This would display something like “Section 2:” before each h3 .

For nested counters (like chapter and subsection), you can do:

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

That gives you output like “2.1”, “2.2”, etc., depending on how many times each counter was reset and incremented.

Common Use Cases

Here are some practical scenarios where these properties shine:

• Auto-numbered headings : Perfect for documentation sites or long-form content.
• Custom list styling : You can build your own ordered lists without relying on <ol></ol> .
• Multi-level counters : Like 1.1, 1.2, 2.1, etc., great for technical specs or legal documents.
• Visual indicators : Counters can help track progress visually in UI components.

Just remember:

• Always reset a counter before using it.
• Increment only when needed.
• Don't forget to display it with content .

That's basically how counter-reset and counter-increment work. It might seem a bit abstract at first, but once you get the hang of scoping and nesting, they become powerful tools for layout logic.

以上是描述CSS'反序列”和``反插入屬性''屬性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！