计数器增量未正常启动

Question

我遇到以下问题，我的计数器增量无法正常工作。

h4.heading_numberlist {
  margin-top: 12.0pt;
  margin-right: 0in;
  margin-bottom: 3.0pt;
  margin-left: 0in;
  page-break-after: avoid;
  font-size: 12.0pt;
  font-family: "Arial", sans-serif;
  color: black;
  font-weight: bold;
}

h4.heading_numberlist::before {
  content: counter(list-number, upper-alpha) '. '; 
}

.topic {
  counter-increment: list-number;
}

<div class="topic nested3">
<h4 class="heading_normal">Care</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Number</h4>
</div>

我试过 .topic > heading_numberlist 但它不起作用

预期输出为：

Care
A. Services
B. Tests
C. Number

我需要忽略包含的列表和从顺序开始的“heading_normal”。

Answer 1

您需要省略第一个 topic 并从第二个开始递增，否则您将在第一次显示之前将计数器递增两次：

h4.heading_numberlist {
  margin-top: 12.0pt;
  margin-right: 0in;
  margin-bottom: 3.0pt;
  margin-left: 0in;
  page-break-after: avoid;
  font-size: 12.0pt;
  font-family: "Arial", sans-serif;
  color: black;
  font-weight: bold;
}

h4.heading_numberlist::before {
  content: counter(list-number, upper-alpha) '. '; 
}

.topic:not(:first-child) {
  counter-increment: list-number;
}

<div class="topic nested3">
<h4 class="heading_normal">Care</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Services</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Tests</h4>
</div>
<div class="topic nested3">
<h4 class="heading_numberlist">Number</h4>
</div>

Answer 2

或者，您可以使用 counter-reset 作为单独的容器。

h4.heading_numberlist {
  margin-top: 12.0pt;
  margin-right: 0in;
  margin-bottom: 3.0pt;
  margin-left: 0in;
  page-break-after: avoid;
  font-size: 12.0pt;
  font-family: "Arial", sans-serif;
  color: black;
  font-weight: bold;
}

h4.heading_numberlist::before {
  content: counter(list-number, upper-alpha) '. ';
}

.topic {
  counter-increment: list-number;
}

.container {
  counter-reset: list-number;
}

<div class="topic nested3">
  <h4 class="heading_normal">Care</h4>
</div>
<div class="container">
  <div class="topic nested3">
    <h4 class="heading_numberlist">Services</h4>
  </div>
  <div class="topic nested3">
    <h4 class="heading_numberlist">Tests</h4>
  </div>
  <div class="topic nested3">
    <h4 class="heading_numberlist">Number</h4>
  </div>
</div>

<div class="container">
  <div class="topic nested3">
    <h4 class="heading_numberlist">Services</h4>
  </div>
  <div class="topic nested3">
    <h4 class="heading_numberlist">Tests</h4>
  </div>
  <div class="topic nested3">
    <h4 class="heading_numberlist">Number</h4>
  </div>
</div>

计数器增量未正常启动

Counter Increment is not starting properly

html

css

css-counter