counter-increment

important note重要訊息:

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

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

語法

{ counter-increment:sCounter}

可能的值

sCounter

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

identifier

計數器的名稱,後面可選擇性地加上遞增值。

increment

整數,指出計數器在每次元素出現時遞增的數量。允許零和負整數。

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

備註

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

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

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

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

範例

下列範例示範使用 counter-resetcounter-incrementcontent 自動進行章節編號。 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)) Gg721755.xtlink_newWindow(zh-tw,Expression.40).png 找到此虛擬類別的定義。

適用範圍

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