Learn CSS, the Counter property has to be understood clearly that CSS counter properties are supported by almost all browsers (including IE8), but are not often used. This article and everyone to share is counter property related content, although this property is not commonly used, but I hope you need to use the time, this article is helpful to everyone.
Counter-reset
Translate to counter reset. Shaped like: Counter-reset:counter-name
The common wording is
/ * 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 counter on an element
counter-increment
couter-increment Translate to counter reset
commonly used in the wording
/ * 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 initialize a counter with Counter-reset in its parent element .
For example:
//parent element has a counter-reset//applied to instantiate itsection {
Counter-reset:unicorncounter;
}
//Specify the child element being countedsection H1 {
Counter-increment:unicorncounter;
}
in the above code, each H1 element of the section will be set counted value of 1
CSS Grammar rules
Counter-reset and counter-increment are similar in syntax
The first digit indicates the specific counter identification
can be a-Z 0-9 _-combination of words but cannot be keyword none, unset, initial, or inherit
Source: Network
Counter properties of CSS Learning
