div が直前の ol のカウンターを継承しているようです。カウンターの仕様を読むと親要素や直前の隣接要素やその子孫要素から継承する挙動が書いてあります。 https://drafts.csswg.org/css-lists-3/#inheriting-counters
こうならないようにするには div より前の ol を別の div で囲むとよさそうです。
Like!
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
1Answer
1
Comments
@jhiaxus
Questioner上の例だとbody直下のolとdivが兄弟要素だからそれを継承しちゃってるって事ですかね(´・ω・｀)
W3Cがそう言ってるなら仕方ないですね.勉強になりました.ありがとうございます.