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 のままなのはなぜですか? span 要素をカウントできるのはなぜですか?

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 に答える