html - CSS Counter Increment不起作用 [英] html - CSS Counter Increment does not work

问题描述

这是我的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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！