本文介绍了html - CSS Counter Increment不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的CSS和HTML：
body {counter-reset ：sections subsection;}。手动h1：在{counter-increment：sections;内容：Sectioncounter（sections）。;}。手动h2：before {counter-increment：subsection;内容：计数器（部分）。 counter（subsection）;}。manual h2 {line-height：60px; color：＃3a7486;} < div class =手册> < H1→1< / H1> < H2> 1.1< / H2> < H2> 1.2< / H2> < H2> 1.3< / H2> < H2> 1.4< / H2> < H1> 2'; / H1> < H2> 2.1< / H2> < H2> 2.2< / H2> < H2> 2.3< / H2> < h2> 2.4 < / div>
p>我想完全按照您在html中看到的那样得到结果。但是，在第二个H1而不是2.1之后，我看到了2.5。我错过了什么？
解决方案
您必须为每个H1重置计数器小节：
h1 {
counter-reset：subsection;
}
body {counter-reset：sections subsection;} h1 {counter-reset：subsection;}。h1：before {counter-increment：sections;内容：Sectioncounter（sections）。;}。手动h2：before {counter-increment：subsection;内容：计数器（部分）。 counter（subsection）;}。manual h2 {line-height：60px; color：＃3a7486;} < div class =手册>< H1→1< / H1>< H2> 1.1< / H2>< H2> 1.2< / H2>< H2> 1.3< / H2>< H2> 1.4< / H2>< H1> 2'; / H1>< H2> 2.1< / H2>< H2> 2.2< / H2>< H2> 2.3< / H2>< H2> 2.4< / H2>< / DIV>
This is my CSS and HTML:
body {
counter-reset: sections subsection;
}
.manual h1:before {
counter-increment: sections;
content: "Section " counter(sections)". ";
}
.manual h2:before {
counter-increment: subsection;
content: counter(sections)"." counter(subsection)" ";
}
.manual h2 {
line-height: 60px;
color: #3a7486;
}<div class="manual"> <h1>1</h1> <h2>1.1</h2> <h2>1.2</h2> <h2>1.3</h2> <h2>1.4</h2> <h1> 2</h1> <h2>2.1</h2> <h2>2.2</h2> <h2>2.3</h2> <h2>2.4</h2> </div>
I want to get the results exactly as you see in the html. However,after the second H1 instead of having 2.1, I see 2.5. am I missing anything?
解决方案
You have to reset counter subsection for each H1:
h1 {
counter-reset: subsection;
}
body {
counter-reset: sections subsection;
}
h1 {
counter-reset: subsection;
}
.manual h1:before {
counter-increment: sections;
content: "Section " counter(sections) ". ";
}
.manual h2:before {
counter-increment: subsection;
content: counter(sections) "." counter(subsection) " ";
}
.manual h2{
line-height: 60px;
color: #3a7486;
}<div class="manual"> <h1>1</h1> <h2>1.1</h2> <h2>1.2</h2> <h2>1.3</h2> <h2>1.4</h2> <h1> 2</h1> <h2>2.1</h2> <h2>2.2</h2> <h2>2.3</h2> <h2>2.4</h2> </div>
这篇关于html - CSS Counter Increment不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！