Counter Increment is not starting properly

问题

I'm having the below issue that my counter increment are not working properly.

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>

I have tried with .topic > heading_numberlist but it's not working

Expected Output is to be:

Care
A. Services
B. Tests
C. Number

I need to neglect the "heading_normal" for the list included and starting from the order.

回答1:

You need to omit the first topic and increment from the second one otherwise you will increment the counter twice before the first display:

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>

回答2:

Or, you can use counter-reset for seperated container.

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>

来源：https://stackoverflow.com/questions/62935793/counter-increment-is-not-starting-properly

标签

html

css

css-counter