css计数器递增不必要的复位跳过：之前 [英] css counter-increment unwanted reset when skipping :before

问题描述

我有一个问题，我的计数器，我使用在h3，h4和h5之前获取数字，像一个列表。只有当标签具有class =count时，该数字才可见，并且它只会对下面的标题进行计数器重置。

Im having a problem with my counter that im using to get numbers before h3, h4 and h5, like a list. The number should only be visible if the tag has class="count", and its only then it should counter-reset for the header below.

当我跳过显示数字在h3的h4s计数器搞乱upp，同样跳过h4。有没有人知道为什么？

When i skip showing the number on a h3 the h4s counter gets messed upp, and same for skipping h4. Does anyone have any idea why?

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 标记时重置。 p>

As per your CSS code for the counter, the value of h5 counter should be reset whenever you encounter an h4 tag.

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

由于上面的代码，当浏览器遇到 h5 的计数器值的 h4 计数器会重置为0.这是为什么不是 1.1.3 的值为 1.1.1

Because of the above code, when the browser encounters the h4 tag with no class (and content as No Counter) the counter value of h5 counter gets reset back to 0. This is the reason why instead of 1.1.3 you had got the value as 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代码应该可以解决这个问题。

If my understanding of your question is correct, what you actually need is to reset the counter only when the heading tags have class="count". Hence, modifying the counter-reset CSS code like below should solve the problem.

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计数器递增不必要的复位跳过：之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！