counter-increment 屬性

tags: CSS

Date : 2022 .05 .25

CCS 的計數器，可用在章節編號

/* 第一層 */
ul.myCounter{
  /* 重製第一層計數器，設定識別名稱 */
  counter-reset: number-lv-1; /*名稱自定義*/
}

ul.myCounter>li::before{
  /* 
    識別字是 number 遞增的數字 
    conter-increment: 識別字
  */
  counter-increment:  number-lv-1;
  content: counter(number-lv-1)".";
}

/* 第二層 */
ul.myCounter ul{
  counter-reset: number-lv-2;
}

ul.myCounter ul>li::before{
  counter-increment:  number-lv-2;
  content:counter(number-lv-1)"-"counter(number-lv-2)".";
}

  <ul class="myCounter">
    <li>HTML</li>
    <li>CSS <ul>
      <li>基礎選擇器</li>
      <li>盒模型、定位</li>
      <li>偽元素</li>
    </ul> </li>
    <li>JavaScript</li>
  </ul>
</div>