CSS 計(jì)數(shù)器

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

使用計(jì)數(shù)器自動(dòng)編號(hào)

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

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

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

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

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

CSS 實(shí)例

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

運(yùn)行代碼 ?

嵌套計(jì)數(shù)器

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

CSS 實(shí)例

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

運(yùn)行代碼 ?

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

CSS 實(shí)例

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

運(yùn)行代碼 ?

CSS 計(jì)數(shù)器屬性

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

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