2

我正在尝试掌握 CSS 计数器的窍门，但似乎我无法理解它。

这是我拥有的一个最小示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: chapter;
    counter-reset: section;
    counter-reset: theorem;
}

.outline-1 {
    counter-increment: chapter ;
}

span[class^="section-number"] {
    counter-increment: section ;
}
.theorem:before {
    counter-increment: theorem;
    content: "Theorem " counter(chapter) "." counter(section) "." counter(theorem) ": ";
}

</style>
</head>
<body>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-1">1.2</span> Basic</h3>
<div class="theorem"> Very important theorem! </div></div>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-2">1.2</span> Some  Combinatorics</h3>
<div class="theorem"> Very important theorem! </div></div>

</body>
</html>

我得到的结果是：

1.1 基础

定理 1.0.1：非常重要的定理！

1.2 一些组合学

定理 2.0.2：非常重要的定理！

为什么第二个计数器保持在 0？为什么我可以计算跨度元素？

4

1 回答 1

1 

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: chapter;
    counter-reset: section;
    counter-reset: theorem;
}

.outline-1 {
    counter-reset: section;
    counter-increment: chapter ;
    
}

span[class^="section-number"] {
    counter-increment: section ;
}
.theorem:before {
    counter-increment: theorem;
    content: "Theorem " counter(chapter) "." counter(section) "." counter(theorem) ": ";
}

</style>
</head>
<body>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-1">1.2</span> Basic</h3>
<div class="theorem"> Very important theorem! </div></div>

<div id="outline-container-sec-1-2" class="outline-1">
<h3 id="sec-1-2"><span class="section-number-2">1.2</span> Some  Combinatorics</h3>
<div class="theorem"> Very important theorem! </div></div>

</body>
</html>

于 2017-01-01T23:56:54.260 回答