跳過時，css反向增加不需要的重置：之前

Question

我有一個問題，我的計數器，我用來獲取數字在h3，h4和h5之前，就像一個列表。 只有當標簽具有class =“count”時才能看到該數字，並且只有這樣才能對下面的標題進行計數器重置。

當我跳過顯示h3上的數字時，h4s計數器變得混亂upp，同樣跳過h4。 有誰知道為什么？

 body { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3) ". " } h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". " } h5.count:before { counter-increment: h5; content: counter(h3) "." counter(h4) "." counter(h5) ". " } h3:before, h4:before, h5:before { content: ""; counter-increment: none } 

 <h3 class="count">: should be : 1</h3> <h4 class="count">: should be : 1.1</h4> <h5 class="count">: should be : 1.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5> <h4 class="count">: should be : 1.2</h4> <h3>No counter</h3> <h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5> <h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4> <h3 class="count">: should be : 2</h3> <h5 class="count">: should be : 2.0.1</h5> <h4 class="count">: should be : 2.1</h4> <h5 class="count">: should be : 2.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 2.1.2</h5> 

CSS

body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}

h3.count:before { counter-increment: h3; content: counter(h3) ". "}
h4.count:before { counter-increment: h4; content: counter(h3) "." counter(h4) ". "}
h5.count:before { counter-increment: h5; content: counter(h3) "." counter(h4) "." counter(h5) ". "}

h3:before, 
h4:before, 
h5:before{ content: ""; counter-increment: none } 

HTML

<h3 class="count">: should be : 1</h3>
<h4 class="count">: should be : 1.1</h4>
<h5 class="count">: should be : 1.1.1</h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4>
<h5 class="count">: should be : 1.1.3</span></h5>
<h5>No counter</h5>
<h5 class="count">: should be : 1.1.4</span></h5>
<h4 class="count">: should be : 1.2</h4>

結果

1. : should be : 1
1.1. : should be : 1.1
1.1.1. : should be : 1.1.1
No counter
1.1.2. : should be : 1.1.2
No counter
1.1.1. : should be : 1.1.3
No counter
1.1.2. : should be : 1.1.4
1.2. : should be : 1.2

代碼： http ： //jsfiddle.net/6gj2r1jd/

Answer 1

根據計數器的CSS代碼，每當遇到h4標記時，都應重置h5計數器的值。

body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5} /* this one */

由於上面的代碼，當瀏覽器遇到沒有類的h4標簽（並且內容為No Counter ）時， h5計數器的計數器值重置為0.這就是為什么而不是1.1.3你得到了值的原因如1.1.1

<h5 class="count">: should be : 1.1.2</h5>
<h4>No counter</h4> <!-- This line would cause h5 counter to reset -->
<h5 class="count">: should be : 1.1.3</span></h5>

如果我對您的問題的理解是正確的，那么您實際需要的是僅在標題標簽具有class="count"時重置計數器。 因此，如下所述修改計數器重置CSS代碼應該可以解決問題。

h3.count {counter-reset: h4}
h4.count {counter-reset: h5}

 body { counter-reset: h3 } h3.count { counter-reset: h4 } h4.count { counter-reset: h5 } h3.count:before { counter-increment: h3; content: counter(h3)". " } h4.count:before { counter-increment: h4; content: counter(h3)"." counter(h4)". " } h5.count:before { counter-increment: h5; content: counter(h3)"." counter(h4)"." counter(h5)". " } h3:before, h4:before, h5:before { content: ""; counter-increment: none } 

 <h3 class="count">: should be : 1</h3> <h4 class="count">: should be : 1.1</h4> <h5 class="count">: should be : 1.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 1.1.2</h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.1.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.1.4</span></h5> <h4 class="count">: should be : 1.2</h4> <h3>No counter</h3> <h4 class="count">: should be : <span style="color: #ff0000">1.3</span></h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.1</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.2</span></h5> <h4>No counter</h4> <h5 class="count">: should be : <span style="color: #ff0000">1.3.3</span></h5> <h5>No counter</h5> <h5 class="count">: should be : <span style="color: #ff0000">1.3.4</span></h5> <h4 class="count">: should be : <span style="color: #ff0000">1.4</span></h4> <h3 class="count">: should be : 2</h3> <h5 class="count">: should be : 2.0.1</h5> <h4 class="count">: should be : 2.1</h4> <h5 class="count">: should be : 2.1.1</h5> <h5>No counter</h5> <h5 class="count">: should be : 2.1.2</h5>