counter counters 计数器

Posted 2021-02-14 rosendolu

1. counter-reset

     counter-reset:counter1  /* 重置计数器为 0 */
     counter-reset:counter1 0  /* 重置计数器为 0 */
     counter-reset:counter1 -1  /* 重置计数器1为 -1 */
     counter-reset:counter1 1 counter2 2  /* 重置计数器1为 1 计数器2 为 2 */

2. counter-increment

     counter-increment:counter1  /*  增量为 1 */
     counter-increment:counter1 0   /*  增量为 0 */
     counter-increment:counter1 -1   /*  增量为 -1 */
     counter-increment:counter1 5   /*  增量为 5 */
     counter-increment:counter1 1 counter2 2   /*  counter1增量为 1 counter2 增量为2 */

3. counter counters
   • counter(name),counter(name,style) // style 默认是decimal
   • counters(name,string),counters(name,string,style) // style 默认是decimal

应用

1. 计数

         .container {
            counter-reset: counter1;
          }
          h2::before {
            counter-increment: counter1;
            content: "Setion " counter(counter1) " : "; 
          }

     <div class="container">
      <h2>one </h2>    <!-- Setion 1 : -->
      <h2>two </h2>   <!-- Setion 2 : -->
      <h2>three </h2>
      <h2>four </h2>
      <h2>five </h2>
      <h2>six </h2> 
    </div>

2. 嵌套计数

        ol {
          list-style-type: none;
          counter-reset: li;
        }
        li::before {
          counter-increment: li;
          content: counters(li,".") " ";
        }

    <div class="list">
      <ol>
        <li>content</li> <!-- 1 -->
        <li> content
          <ol>
            <li>details</li>  <!-- 2.1 -->
          </ol>
        </li>
      </ol>