Question

我的计数器出了问题，我在h3，h4和h5之前用来获取数字，就像列表一样。只有当标签有class =＆＃34; count＆＃34;时才能看到这个数字，只有那时它才能反复重置下面的标题。

当我跳过显示h3上的数字时，h4s计数器变得混乱upp，同样跳过h4。有谁知道为什么？

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

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代码，只要遇到h5标记，就应重置h4计数器的值。

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

由于上述代码，当浏览器遇到没有类的h4标记（内容为无计数器）时，h5计数器的计数器值会重置这就是为什么而不是 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>

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

1 个答案: