Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

counter

Counters in CSS are essentially variables maintained by CSS. Counters can be incrementing by CSS rules to track the number of times they are used, for example, counters can be used to automatically number titles in web pages.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> ol {list-style: none; padding: 0; margin: 0; /* value -> counter name (custom) */ counter-reset: counterList; } ol li { counter-increment: counterList; } /* ol li::before { content: counter(counterList)". "; } */ ol li::before {content: "counter(counterList)". Chapter "; } < / style > < / head > < body > < ol > < li > millet mobile phone < / li > < li > huawei mobile phone < / li > < li > meizu phone < / li > < / ol > < / body > < / HTML >Copy the code

CSS counters can work with any HTML element (more often with list elements)

1. Set the counter of the CSS

  • Counter-reset property: Resets the specified value of the counter

  • Counter-increment property: Sets the value of each increment of the counter

    2. Counters used to display CSS

  • Counter () function

  • Counters () function

counter-resetattribute

The CSS counter-reset property is used to reset the counter to a given value. The default value of this property is None, and the value can be of one of three types:

  • To reset to the name of the counter. The name can be letters (A-z, A-z), decimal digits (0-9), hyphens (-), underscores (_), and escape characters.
  • To reset the counter to each time the element appears. If not specified, the default value is 0.
  • None: No counter reset is performed.

The number of counters does not have to be one, but can be multiple. If the counter-reset attribute is multiple counters, the counters are separated by Spaces. The following example code shows the counter-reset property setting multiple counters:

h1 {
  counter-reset: chapter section 1 page;
}
Copy the code

The meaning of the above sample code is:

  • willchapter 和 pageBoth counters reset to 0.
  • willsectionThe counter is reset to 1.

Counter – increment properties

The CSS counter-increment property is used to set the increment of the counter each time. The default value of this property is None, and the value can be of one of three types:

  • The name to be added as a counter. The name can be letters (A-z, A-z), decimal digits (0-9), hyphens (-), underscores (_), and escape characters.
  • To increment the counter to the value of each occurrence of the element. If not specified, the default value is 1.
  • None: No counter can be incremented.

If the counter-increment property sets the increments of multiple counters, the counters are separated by Spaces. The following example code shows how the counterincrement property sets multiple counters:

h1 {
  counter-increment: chapter section 2 page;
}
Copy the code

The meaning of the above sample code is:

  • willchapter 和 pageBoth counters are incremented by 1.
  • willsectionThe counter is incremented by 2.

counter()function

The CSS counter() function is used to simply display the contents of the counter on an HTML page. The counter() function returns a string representing the current value of the specified counter.

The syntax structure of the counter() function looks like this:

conter(custom-ident, counter-style)
Copy the code

The above syntax structures are described as follows:

  • custom-identParameter: Represents the name of the counter.
  • counter-styleParameter: indicates the style of display.

counters()function

The CSS counters() function supports nesting of counters. The counters() function returns a string representing the current value of the specified counter.

The syntax structure of the counters() function is as follows:

conter(custom-ident, string, counter-style)
Copy the code

The above syntax structures are described as follows:

  • custom-identParameter: Represents the name of the counter.
  • stringParameter: represents the delimiter that the counter is nested with, which can be any number of text characters.
  • counter-styleParameter: indicates the style of display.