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

对于"内部div"部分，您需要使用.item而不是.item .t2来递增subsection。不要忘记，第一个元素不必递增计数器。在 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