我的计数器有问题,我用来获取h3,h4和h5之前的数字,例如列表。仅当标签具有class =“count”时,该数字才应可见,并且只有在其随后针对下面的 header 进行反向重置的情况下,该数字才是可见的。
当我跳过在h3上显示数字时,h4s计数器会困惑,并且与跳过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/
最佳答案
根据计数器的CSS代码,每当遇到h5
标记时,应重置h4
计数器的值。
body {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5} /* this one */
由于上述代码,当浏览器遇到不带类的
h4
标记(且内容为 No Counter )时,h5
counter的计数器值重置为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>
关于html - 跳过:before时css计数器增加不必要的重置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28562639/