了解CSS中的計數函數

這篇文章主要介紹了解CSS中的計數函數，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

counter()

counter 返回一個代表計數器當前值的字符串。接收兩個參數，一個名稱，一個計數樣式。counter(name,styleName),name 區分大小寫，作為代表當前計數器的名稱標識。styleName 參數是可選的，代表遞增數字或者字母的種類，可接受的參數為 list-style-type 所支持的種類。常用的有以下這些:

• disc （實心圓點）

• circle （空心圓點）

• square （實心方塊）

• decimal （阿拉伯數字 12345...）

• lower-roman（羅馬數字 i, ii, iii...）

• upper-roman (羅馬數字 I, II, III, IV...)

• simp-chinese-informal (中文計數 一、二、三、....九十九、)

• simp-chinese-formal （中文繁體 壹貳叁肆伍...）

• lower-latin (小寫字母 abcd...)

• upper-latin (大寫字母 ABCD....)

• ...

更多信息以及兼容性可看 MDN list-style-type

與計數器利益相關的還有兩個屬性值：

• counter-reset

• counter-increment

counter-reset,counter-increment

counter-reset 用于重置 CSS 計數器，重置內容包括名稱，初始數字。例子：

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

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

效果

counter-increment 用于代表計數器的遞增間隔，看代碼

    <p class="demo2">
      <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;
      }

效果

兼容性

基本都支持

counters()

counters()是一個嵌套計數器，用于定義嵌套計數器的連接字符.counters(counterName,string,styleName),接收 3 個參數 counterName,string,styleName.其中第三個參數是可選的。看栗子

    <p class="father">
      <p class="son">
        內容一
        <p class="father">
          <p class="son">子內容一</p>
          <p class="son">子內容二</p>
          <p class="son">子內容三</p>
        </p>
      </p>
      <p class="son">
        內容二
        <p class="father">
          <p class="son">
            子內容一
            <p class="father">
              <p class="son">子子內容一</p>
              <p class="son">子子內容二</p>
            </p>
          </p>
          <p class="son"></p>
          <p class="son"></p>
          <p class="son"></p>
        </p>
      </p>
      <p class="son">
        內容三
      </p>
    </p>

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

效果

列表元素用 counters 定義相互之間的計數連接規則，可以很方便模擬有序列表。

兼容性

兼容性跟 counter 一樣

以上是“了解CSS中的計數函數”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！