CSS counter-increment egenskap

Definition och användning

counter-increment-egenskapen sätter ökningen av en räknare för varje utseende av en vald sekvens. Standardökningen är 1.

Förklaring

Använd denna egenskap för att öka (eller minska) ett värde, vilket kan vara ett positivt eller negativt värde. Om inget number-värde tillhandahålls, är standardvärdet 1.

Note:If "display: none" is used, counting cannot be increased. If "visibility: hidden" is used, counting can be increased.

See also:

CSS Reference Manual:CSS :before pseudoelement

CSS Reference Manual:CSS :after pseudoelement

CSS Reference Manual:content attribute

CSS Reference Manual:counter-reset attribute

CSS function:counter() function

HTML DOM Reference Manual:counterIncrement attribute

Example

The method of numbering parts and subparts (such as "Section 1", "1.1", "1.2"):

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

Try it yourself

CSS syntax

counter-increment: none|id|initial|inherit;

Attribute value

Value Description
none Default. The selector has no counter increment.
id number

id Define the selector, id, or class that will increase the count.

number Define the increment. number can be a positive number, zero, or a negative number.
inherit The counter-increment attribute value should be inherited from the parent element.

Technical details

Default value: none
Inheritance: no
Version: CSS2
JavaScript syntax: object.style.counterIncrement="subsection"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Note:If !DOCTYPE is defined, then Internet Explorer 8 (and higher versions) support the counter-increment attribute.