A closer look at the count function in CSS

This article will introduce to you the counting functions in CSS: counter(), counters(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Recommended tutorial: CSS video tutorial]

counter()

counter returns a representative counter current A string of values. Receives two parameters, a name and a counting style. counter(name,styleName),name is case-sensitive and serves as the name identifier representing the current counter. The styleName parameter is optional and represents the type of incrementing numbers or letters. The acceptable parameters are the types supported by list-style-type. Commonly used ones are the following:

• disc (solid dot)
• circle (hollow dot)
• square (solid square)
• decimal (Arabic numerals 12345...)
• lower-roman (Roman numerals i, ii, iii...)
• upper-roman (Roman numerals I, II, III, IV. ..)
• simp-chinese-informal (Chinese counting one, two, three, ...ninety-nine,)
• simp-chinese-formal (Chinese traditional one, two, three四五...)
• lower-latin (lower case abcd...)
• upper-latin (upper case ABCD....)
• ...

For more information and compatibility, seeMDN list-style-type

---

##There are two other attribute values ​​​​related to the counter’s interests:

• counter-reset
• counter-increment

---

counter-reset,counter -increment

counter-reset is used to reset the CSS counter. The reset content includes the name and initial number. Example:

    <div></div>

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

Effect

---

counter-increment is used to represent the increment interval of the counter, see the code

    <p>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </p>
      .demo2{
        counter-reset: counter2 1;
        /* counter-increment: counter2 -2; */
      }
      section:before {
        content: counter(counter2,decimal);
        counter-increment: counter2 2;
      }

Effect

Compatibility

Basically supported

counters()

counters () is a nested counter, used to define the connection character of the nested counter.

counters(counterName,string,styleName), receives 3 parameters counterName, string, styleName. The third parameter is optional Chosen. Look at the chestnut

    <p>
      </p><p>
        内容一
        </p><p>
          </p><p>子内容一</p>
          <p>子内容二</p>
          <p>子内容三</p>
        
      
      <p>
        内容二
        </p><p>
          </p><p>
            子内容一
            </p><p>
              </p><p>子子内容一</p>
              <p>子子内容二</p>
            
          
          <p></p>
          <p></p>
          <p></p>
        
      
      <p>
        内容三
      </p>
    

      .father {
        counter-reset: counter3;
        padding-left: 30px;
      }
      .son:before {
        content: counters(counter3, "-")'.';
        counter-increment: counter3;
      }

effect

List elements use counters to define counting connection rules between each other, which can easily simulate an ordered list.

Compatibility

Compatibility is the same as counter

Summary

counter is analogous to ol, ul, in style It will be more flexible in terms of control, and the setting style will be more arbitrary. For projects with list-related style optimization, you can consider using counter() and counters() for optimization. Compatibility is also good.

For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A closer look at the count function in CSS. For more information, please follow other related articles on the PHP Chinese website!