☞ 語法說明
添加屬性 ⇢ counter-reset 和 counter-increment
顯示計數器 ⇢ 在content 中設定 counter() 或 counters() 函數值
body {
counter-reset: section; /* 重置計數器 0 */
}
h3:before {
counter-increment: section; /* 增加計數器值 */
content: "Section " counter(section) ": "; /* 顯示計數器 */
}
<h3>Introduction</h3> <h3>Body</h3> <h3>Conclusion</h3>
☞ 範例
套用 <ol>
ol {
counter-reset: section; /* 重置計數器 0 */
list-style-type: none;
}
li:before {
counter-increment: section; /* 增加計數器值 */
content: counters(section, ".") " "; /* 計數器以“.”分隔 */
}
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
