CSS 計數(shù)器

CSS 計數(shù)器通過一個變量來設(shè)置，根據(jù)規(guī)則遞增變量。

使用計數(shù)器自動編號

CSS 計數(shù)器根據(jù)規(guī)則來遞增變量。

CSS 計數(shù)器使用到以下幾個屬性：

counter-reset - 創(chuàng)建或者重置計數(shù)器
counter-increment - 遞增變量
content - 插入生成的內(nèi)容
counter() 或 counters() 函數(shù) - 將計數(shù)器的值添加到元素

要使用 CSS 計數(shù)器，得先用 counter-reset 創(chuàng)建：

以下實例在頁面創(chuàng)建一個計數(shù)器 (在 body 選擇器中)，每個 <h2> 元素的計數(shù)值都會遞增，并在每個 <h2> 元素前添加 "Section <計數(shù)值>:"

CSS 實例

body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

運行代碼 ?

嵌套計數(shù)器

以下實例在頁面創(chuàng)建一個計數(shù)器，在每一個 <h1> 元素前添加計數(shù)值 "Section <主標(biāo)題計數(shù)值>.", 嵌套的計數(shù)值則放在 <h2> 元素的前面，內(nèi)容為 "<主標(biāo)題計數(shù)值>.<副標(biāo)題計數(shù)值>":

CSS 實例

body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }

運行代碼 ?

計數(shù)器也可用于列表中，列表的子元素會自動創(chuàng)建。這里我們使用了 counters() 函數(shù)在不同的嵌套層級中插入字符串:

CSS 實例

ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }

運行代碼 ?

CSS 計數(shù)器屬性

屬性	描述
content	使用 ::before 和 ::after 偽元素來插入自動生成的內(nèi)容
counter-increment	遞增一個或多個值
counter-reset	創(chuàng)建或重置一個或多個計數(shù)器

上一篇：CSS 表單下一篇：CSS 網(wǎng)頁布局