CSS counter-reset

Question

我很難理解爲什麼有些計數器有效，有些不會。在以下HTML中，目標是使用cnt3樣式創建一個使用<h3>的目錄列表，該列表匹配後續的<h2>標頭。而且我希望目錄中的編號與<h2>標題的編號相匹配。我試圖使用CSS計數器來完成它，並且大多數情況下它正在工作，但似乎我的h3s計數器的目錄，要麼沒有增加，要麼經常重置，但我不能說爲什麼，我也沒有想出如何調試這個... Mozilla Firebug似乎告訴我，反增量正在適當的地方使用，但它似乎沒有影響編號。顯然，這是一個簡單的例子，只是爲了證明這個問題，它出現在一個更大的文檔中。

HTML

<h1>H1 Title</h1> 
<h2>H2 Title</h2> 
<h3 class="cnt3">H3 1</h3> 
<h3 class="cnt3">H3 2</h3> 
<h3 class="cnt3">H3 3</h3> 
<h2 class="cnt">H2 Title 2</h2> 
<h3 class="top">H3 4</h3> 
<h3 class="top">H3 5</h3> 
<h3 class="top">H3 6</h3> 
<h2 class="cnt">H2 Title 3</h2> 

CSS

h1 { 
    counter-reset: h2s; 
    text-align: center; 
    font-size: 24pt; 
} 
h2 { 
    font-size: 20pt; 
    counter-reset: h3s; 
    counter-reset: h3t; 
} 
h3 { 
    font-size: 16pt; 
    counter-reset: h4t; 
} 
h2.cnt:before { 
    content: 'Section ' counter(h2s, decimal) ': '; 
    counter-increment: h2s; 
} 
h3.cnt3:before { 
    content: 'Section ' counter(h3s, decimal) ': '; 
    counter-increment: h3s; 
} 
h3.top:before { 
    font-size: 16pt; 
    content: counter(h2s, decimal) '.' counter(h3t, decimal) ': '; 
    counter-increment: h3t; 
} 
h4 { font-size: 13pt; } 
h4.top:before { 
    font-size: 16pt; 
    content: counter(h2s, decimal) '.' counter(h3t, decimal) '.' counter(h4t, decimal) ': '; 
    counter-increment: h4t; 
} 

問題發生在Firefox和Chrome瀏覽器，所以我想這是我的代碼，而不是在這兩種瀏覽器相同的錯誤！

Answer 1

您沒有使用應該使用的方法。

級聯規則也適用於此屬性。 所以這裏....

h2 { 
    font-size: 20pt; 
    counter-reset: h3s; 
    counter-reset: h3t; 
    } 

你的財產的第二個定義覆蓋以前的。

當您重置2個櫃檯辦理相同的元素他們應該一起指定如我在下面

您H2規則應該如下

h2 { 
    font-size: 20pt; 
    counter-reset: h3s h3t; 
} 

這裏有一個JSBin做工精細