编程知识 cdmana.com

CSS function those things (5) counting function

image.png

counter()

counter Returns a string representing the current value of the counter . Receive two parameters , A name , A counting pattern .counter(name,styleName),name Case sensitive , As a name that represents the current counter .styleName Parameters are optional , Represents the type of increasing number or letter , The acceptable parameters are list-style-type The types supported . The common ones are as follows :

  • disc ( Solid dots )
  • circle ( Hollow dots )
  • square ( Solid block )
  • decimal ( Arabic numerals 12345...)
  • lower-roman( Rome digital i, ii, iii...)
  • upper-roman ( Rome digital I, II, III, IV...)
  • simp-chinese-informal ( Chinese counting One 、 Two 、 3、 ... and 、.... ninety-nine 、)
  • simp-chinese-formal ( Chinese traditional Twelve thirty-four five ...)
  • lower-latin ( Lowercase letters abcd...)
  • upper-latin ( Capital ABCD....)
  • ...

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


There are also two attribute values related to the benefit of the counter :

  • counter-reset
  • counter-increment

counter-reset,counter-increment

counter-reset Used to reset CSS Counter , The reset content includes the name , Initial number . Example :

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

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

effect

image.png


counter-increment Used to represent the increment interval of the counter , Look at the code

    <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 code 

effect

image.png

Compatibility

image.png

Basically supported

counters()

counters() It's a nested counter , The connecting character used to define nested counters .counters(counterName,string,styleName), receive 3 Parameters counterName,string,styleName. The third parameter is optional . Look at the chestnuts

    <div class="father">
      <div class="son">
         Content of a 
        <div class="father">
          <div class="son"> It's the same thing </div>
          <div class="son"> Sub content 2 </div>
          <div class="son"> I've got three things inside </div>
        </div>
      </div>
      <div class="son">
         Content of the two 
        <div class="father">
          <div class="son">
             It's the same thing 
            <div class="father">
              <div class="son"> Sub content 1 </div>
              <div class="son"> Sub content 2 </div>
            </div>
          </div>
          <div class="son"></div>
          <div class="son"></div>
          <div class="son"></div>
        </div>
      </div>
      <div class="son">
         Content of the three 
      </div>
    </div>

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

effect

image.png

List elements use counters The definition of interconnection rules , It's easy to simulate ordered lists .

Compatibility

image.png

Compatibility with counter equally

summary

counter analogy ol,ul, In terms of style , Will be more flexible , It's also more arbitrary to set the style . For projects with list related style optimization , Consider using counter(),counters() To optimize . Compatibility is also good .

Last

I've been summing up recently css Function related things , This is the fourth in a series , So far

The test code from the article will be included in the project , All of them are classified accordingly , You are welcome to pay attention to , If you have any help, you can like it ! The project address is stamped here

版权声明
本文为[Kerinlin]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224152607733N.html

Scroll to Top