counter-reset
重要訊息: |
---|
本文件為初步資訊而且可能隨時變更。 |
設定要建立或重設為零的計數器清單。
語法
{ counter-reset:
sCounter }
可能的值
sCounter
指定以空格分隔之計數器清單的字串,包括下列兩個值或其中一個。
identifier |
計數器的名稱,後面可選擇性地加上整數。 |
integer |
計數器的起始值。預設值為 0。 |
此屬性沒有預設值。這不是繼承屬性。
備註
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
另請參閱
概念
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size