counter-reset

important note重要訊息:

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

設定要建立或重設為零的計數器清單。

語法

{ counter-reset:sCounter}

可能的值

sCounter

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

identifier

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

integer

計數器的起始值。預設值為 0。

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

備註

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)) Gg721754.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

另請參閱

概念

background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size