counter()

Counter returns a string representing the current value of the counter. Accepts two parameters, a name and a count style. Counter (name,styleName),name is case sensitive and identifies as the name representing the current counter. The styleName argument is optional and represents the type of incrementing digits or letters. The accepted arguments are the type supported by list-style type. Commonly used are the following:

  • Disc (solid dot)
  • Circle (hollow dot)
  • Square (solid square)
  • Decimal (Arabic number 12345…)
  • Lower-roman (Roman numerals I, II, iii…)
  • Upper-roman (Roman numerals I, II, III, IV…)
  • A: Simp-Chinese-english (informal) a: two, three,…. 99.
  • Simp-chinese-formal (One two three four five…)
  • Lower-latin (lower-latin abcd…)
  • Upper-latin (uppercase ABCD….)
  • .

For more information and compatibility, see MDN list-style type

There are also two attribute values of interest to the counter:

  • counter-reset
  • counter-increment

counter-reset,counter-increment

Counter -reset is used to reset the CSS counter, including the name, the initial number. Example:

	<div class="demo1"></div>

      .demo1 {
        counter-reset: counter1 123;
      }
      .demo1:before {
        content: counter(counter1,simp-chinese-formal);
      }
Copy the code

The effect

Counter -increment is used to represent the increment interval of a counter

    <div class="demo2">
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </div>
      .demo2{
        counter-reset: counter2 1;
        /* counter-increment: counter2 -2; */
      }
      section:before {
        content: counter(counter2,decimal);
        counter-increment: counter2 2;
      }
Copy the code

The effect

compatibility

Basically all

counters()

Counters () is a nested counter, counter is used to define nested connection characters. Counters (counterName, string, styleName), received three parameters counterName, string, styleName. The third parameter is optional. See the chestnuts

<div class="father"> <div class="son"> </div> <div class="son"> <div class="father"> <div class="son"> <div class="son" Class ="father"> <div class="son"></div> <div class="son"></div> <div class="son"></div> <div Class = "son" > < / div > < div class = "son" > < / div > < / div > < / div > < div class = "son" > content three < / div > < / div >. The father {counter - reset: counter3; padding-left: 30px; } .son:before { content: counters(counter3, "-")'.'; counter-increment: counter3; }Copy the code

The effect

Ordered lists can be easily simulated by using counters to define the rules by which the list elements are connected.

compatibility

Compatibility is the same as counter

conclusion

Compared with OL and UL, Counter is more flexible in style control and more arbitrary in style setting. Consider using counter(),counters() for items with list-related style optimization. Compatibility is also good.

The last

I’ve been summarizing CSS functions recently, and this is the fourth article in a series that has been produced so far

  • CSS functions those things (a) compare functions
  • CSS functions attr()
  • CSS function those things (three) background image function
  • CSS function those things (4) grid function

The project will contain the test code in the article, have done the corresponding classification, welcome to continue to pay attention to, if there is help you can point a like oh! Project address stamp here