首頁  >  文章  >  web前端  >  深入了解CSS中的計數函數

深入了解CSS中的計數函數

青灯夜游
青灯夜游轉載
2021-03-10 10:20:351774瀏覽

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

深入了解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
  • 」-increment

counter-reset,counter -increment

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

    <div></div>

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

效果

深入了解CSS中的計數函數


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

# 效果

深入了解CSS中的計數函數

相容性

深入了解CSS中的計數函數

基本上都支援

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

效果

深入了解CSS中的計數函數

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

相容性

深入了解CSS中的計數函數

相容性跟counter 一樣

#總結

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

更多程式相關知識,請造訪:程式設計影片! !

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

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除