深入了解CSS中的計數函數

本篇文章跟大家介紹CSS中的計數函數：counter()、counters()。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【推薦教學：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
• 」-increment

counter-reset,counter -increment

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

    <div></div>

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

效果

#counter-increment 用來代表計數器的遞增間隔，看程式碼

    <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;
      }

# 效果

相容性

基本上都支援

counters()

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

    <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;
      }

效果

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

相容性

相容性跟counter 一樣

#總結

counter 類比ol,ul，在樣式的把握上，會更靈活，設定樣式也更隨心所欲。對於有清單相關樣式最佳化的項目，可以考慮使用 counter(),counters()來最佳化。相容性也不錯。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是深入了解CSS中的計數函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！