ol要素の入れ子表示について
解決したいこと
CSS カウンターの使用 - CSS_ カスケーディングスタイルシート _ MDN
を参照してol要素が入れ子の時にインデッスク番号「1.1.」「1.2.」とか表示するよう設定したんですが、
ol要素がbody直下の時は意図したとおりの表示してくれるんですけど、olをdivタグなど（どのタグでも）で括るとcounters()関数の「外側」の値がリセットされずに入れ子になっていない直上のol要素のインデックス値を表示してしまいます。
なんでやろ？（´・ω・｀）
<head>
<meta charset="utf-8">
<style>
ol {
counter-reset: section;
list-style-type: none;
}
ol>li {
counter-increment: section;
}
ol>li::marker{
content: counters(section, ".") ". ";
}
</style>
</head>
<body>
<ol>
<li>level1
<ol>
<li>level2
<ol>
<li>level3</li>
<li>level3</li>
<li>level3</li>
</ol>
</li>
<li>level2
<ol>
<li>level3</li>
<li>level3</li>
<li>level3</li>
</ol>
</li>
<li>level2</li>
</ol>
</li>
<li>level1</li>
<li>level1</li>
</ol>
<ol>
<li>level1</li>
<li>level1</li>
<li>level1</li>
</ol>
<div style="color:red;">
<ol>
<li>level1</li>
<li>level1</li>
<li>level1</li>
</ol>
</div>
</body>
上のhtmlだと一番最後のdivで囲んだol要素のリストが入れ子になっていないのに「3.1.」等と表示されてしまいます。
0
