CSS 计数器在 div 内的子项中不起作用

Question

我正在尝试使用 CSS 计数器来创建章节编号。正如您在下面的示例中看到的那样，如果我处理容器内的类，它可以正常工作，但是当我尝试在 div 内的子项中使用它时，它就不起作用了。知道如何纠正这种行为吗？（我需要使用这种结构）

.itemsContainer {
  counter-reset: section;
}

.t1 {
  counter-reset: subsection;
}

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

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

<h3>Direct access to class</h3>
<div class="itemsContainer">
  <p class="t1"></p>
  <p class="t2"></p>
  <p class="t2"></p>
</div>

<h3>Inside div</h3>
<div class="itemsContainer">
  <div class="item">
    <p class="t1"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
</div>

Answer 1

这里的错误来自于规则：

.itemsContainer {
  counter-reset: section;
}

因此，每次有一个.itemsContainer元素时，计数器section都会被重置。

为了避免这种情况，只需说只有第一个 .itemsContainer元素重置计数器：

.itemsContainer:nth-of-type(1) {
  counter-reset: section;
}

对于“Inside div”部分，您需要增加subsectionusing.item和 not .item .t2。不要忘记第一个元素不必增加计数器。在 css 中，您可以使用:not()该属性：

.item:not(:first-child) {
  counter-increment: subsection;
}

请查看演示：

.itemsContainer:nth-of-type(1) {
  counter-reset: section;
}

.itemsContainer .t1 {
  counter-reset: subsection;
}

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

.item:not(:first-child) {
  counter-increment: subsection;
}

.itemsContainer>.t2::before {
  counter-increment: subsection;
  content: counter(section) "."counter(subsection) " ";
}

.itemsContainer>.item>.t2::before {
  content: counter(section) "."counter(subsection) " ";
}

<h3>Direct access to class</h3>
<div class="itemsContainer">
  <p class="t1"></p>
  <p class="t2"></p>
  <p class="t2"></p>
</div>

<h3>Inside div</h3>
<div class="itemsContainer">
  <div class="item">
    <p class="t1"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
  <div class="item">
    <p class="t2"></p>
  </div>
</div>

有关更多详细信息，请查看 W3C 文档：https://www.w3schools.com/CSS/css_counters.asp