我有以下问题，我的计数器增量工作不正常。
null
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>null
我试过使用.topic>； heading_numberlist但它不工作
预期产出为:
Care
A. Services
B. Tests
C. Number
我需要忽略包含的列表的“heading_normal”，从顺序开始。
您需要省略第一个主题并从第二个主题开始递增，否则您将在第一次显示之前将计数器递增两次:
null
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>
或者，您可以对分离的容器使用counter-reset。
null
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>