CSS counters are set by a variable, incrementing the variable according to the rule.

CSS counters use the following properties:

  • Counter -reset – Creates or resets counters
  • Counter – increment-increment variable
  • Content – Inserts generated content
  • Counter () or counters() function – adds the value of the counter to the element

The counter() or counters() functions are methods in the content property.

1. Counter-reset Creates or resets counters

counter-reset: name; / / from by default0Start countingCopy the code
counter-reset: name 2; / / from2Start counting, can be negative or decimal (decimal rounded down), negative or decimal is not recognized by IE and FireFox, the default value0To deal with.Copy the code
counter-reset: name1 2 name2 3; // Multiple counters can be named at the same timeCopy the code
counter-reset: none | inherit; / / get reset reset | inheritanceCopy the code

2. Counter -increment increment variable

counter-increment: name; / / + by default1Each increment of +1
Copy the code
counter-increment: name 2; // Each increment +2, can be set to negative to achieve descending sortCopy the code
counter-increment: name1 name2; // Multiple names (withcounter-resetThe name echoes)Copy the code
counter-increment: none | inherit; Increasing/increasing/kill | inheritanceCopy the code

3. Counter () or counters() — Add the value of the counter to the element

counter()

content: counter(name); 
Copy the code
content: counter(name,style); 
Copy the code
content: counter(name1) counter(name2);
Copy the code

The keyword values supported by the style parameter are those supported by list-style-type.

counters()

content: counters(name, string);
Copy the code
content: counters(name, string, style)
Copy the code

The string argument is a string (required) that represents a connection string with a subsequence number. For example, string 1.1 is a ‘.’ and string 1-1 is a ‘-‘.

Counters () also support a custom increasing style format, which is consistent with the use of the style parameter counter().

Our regular serial numbers can’t just be 1,2,3,4… And there will be things like 1.1,1.2,1.3… Subordinal number of, etc. The former is what counter() does and the latter is what counters() does.

Case reference

Case link

CSS counter with display: None

An element whose display value is None or hidden (for supported browsers) when counter increment is set does not increment. Visibility: Hidden and other declarations do not.

Browser support

All major browsers support counter-reset/counter-increment/Content attributes.

Note: IE8 only specifies! DOCTYPE supports counter-reset/counter-increment/Content attributes.

conclusion

This article is for the impression, only on the use of syntax summary sort, specific analysis and understanding can see the following documentation and reference links.

MDN/Document link Cainiao/Reference link Zhang Xinxu