css3 計數(shù)器

css3計時器,根據(jù)個數(shù)自動增加。就不需要浪費一張圖片資源了。
在此記下,方便后期翻閱

counter-increment屬性遞增一個或多個計數(shù)器值。
counter-increment屬性通常用于counter-reset屬性和content屬性。

可能出現(xiàn)的值:

none:沒有計數(shù)器將遞增
id number:id 定義將增加計數(shù)的選擇器、id 或 class。number 定義增量。number 可以是正數(shù)、零或者負數(shù)。
inherit:指定counter-increment屬性的值,應(yīng)該從父元素繼承

用法:

<style type="text/css">
ol {
  counter-reset: section;                /* 為每個ol元素創(chuàng)建新的計數(shù)器實例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加計數(shù)器的當(dāng)前實例 */
  content: counters(section, ".") " ";   /* 為所有計數(shù)器實例增加以“.”分隔的值 */
}
</style>    

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>
實現(xiàn)的效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容