html - CSS Counter Increment不起作用

Question

这是我的CSS和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>

我想完全按照你在html中看到的那样得到结果。然而，在第二个H1而不是2.1之后，我看到2.5。我错过了什么吗？

Answer 1

您必须为每个H1重置计数器子部分：

h1 {
    counter-reset: subsection;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要重置子部分

检查此代码段

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

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

希望有所帮助