Detailed explanation of CSS counter related attributes learning

The CSS counter attribute is supported by almost all browsers (including IE8), but it is not often used. This article will show you how to learn about these attributes.

COUNTER-RESET

Clearly translated as counter reset. Such as: counter-reset: counter-name

Commonly written as

/* Set counter-name to 0 */
counter-reset: counter-name;

/* Set counter-name to -1 */
counter-reset: counter-name -1;

/* Set counter1 to 1, and counter2 to 4 */
counter-reset: counter1 1 counter2 4;

Used to reset the counter on an element

COUNTER-INCREMENT

Couter-increment is translated as counter reset

Commonly written as

/* Increment counter-name by 1 */
counter-increment: counter-name;

/* Decrement counter-name by 1 */
counter-increment: counter-name -1;

/* Increment counter1 by 1, and decrement counter2 by 4 */
counter-increment: counter 1 counter2 -4;

Before using counter-increment, we must first use counter-reset to initialize a counter in its parent element.

For example:

// parent element has a counter-reset
// applied to instantiate it
section {
  counter-reset: unicornCounter;
}

// specify the child element being counted
section h1 {
  counter-increment: unicornCounter;
}

In the above code, each h1 element of the section will be set to counted value 1

CSS syntax rules

COUNTER-RESET and COUNTER-INCREMENT have similar syntax

The first <custom-ident> indicates the specific counter identifier

Can be a word composed of az 0-9 _ - but cannot be a keyword none, unset, initial, or inherit

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.