counter-increment

重要訊息：
本文件為初步資訊而且可能隨時變更。

設定要遞增的計數器清單。

語法

{ counter-increment: sCounter }

可能的值

sCounter

指定以空格分隔之計數器清單的字串，包括下列兩個值或其中一個。

identifier	計數器的名稱，後面可選擇性地加上遞增值。
increment	整數，指出計數器在每次元素出現時遞增的數量。允許零和負整數。

此屬性沒有預設值。這不是繼承屬性。

備註

counter-increment 屬性可以包含具有一或多個計數器的清單，每個計數器後面可選擇性地加上整數。這個整數代表在每次元素出現之後，計數器遞增的數量。

此屬性可用來在每次元素出現時，產生加上編號的內容。在計數器遞增之前，並不需要定義計數器。若要重設計數器的值，請使用 counter-reset 屬性。

counter-increment 和 counter-reset 屬性都遵循 CSS 串聯的規則。假設有兩個明確性相同的樣式宣告，系統只會處理最後一個出現的宣告。

未顯示的元素 ( display 屬性設定為 none ) 以及不會產生內容的虛擬元素 ( content 屬性設定為 normal ) 都無法遞增或重設計數器。

範例

下列範例示範使用 counter-reset 、 counter-increment 和 content 自動進行章節編號。 body 元素的章次計數器設定為零，而且會隨著後續出現的每個 h1 元素而遞增。每個 h1 元素的節次計數器都會重設，並隨著每個 h2 元素遞增。當您檢視頁面時，每個 h1 元素前面都會加上 "Chapter X" 的標題，而且每個 h2 元素前面都會加上 "X.N" 格式的節次編號。

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
body {
    counter-reset: chapter;      /* Create a chapter counter */
}
h1 {
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h1:before {
    content: "Chapter " counter(chapter) ". ";
}
h2 {
    counter-increment: section;
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}
</style>

由於有一組樣式規則彼此衝突，因此在下列範例中，只有 imagenum 計數器會重設。若要同時重設這兩個計數器，請將它們一起放在相同的規則中。

h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (階層式樣式表 (CSS) 層級 2，修訂 1 (CSS2.1))  找到此虛擬類別的定義。

適用範圍

a, address, b, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, dfn, div, dl, dt, em, fieldset, form, hn, html, i, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, li, ol, p, s, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

另請參閱

概念

counter-reset