本篇文章跟大家介紹CSS中的計數函數:counter()、counters()。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
【推薦教學:CSS影片教學】
counter 傳回一個代表計數器當前值的字串。接收兩個參數,一個名稱,一個計數樣式。 counter(name,styleName),name 區分大小寫,作為代表目前計數器的名稱識別。 styleName 參數是可選的,代表遞增數字或字母的種類,可接受的參數為 list-style-type 所支援的種類。常用的有以下這些:
更多資訊以及相容性可看MDN list-style-type
#與計數器利益相關的還有兩個屬性值:
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(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中文網其他相關文章!