2

この Mozilla の記事を例として、 「 CSS カウンターOL」を使用してカスタム Ordered List() を作成しようとしました。

.fooこのjsFiddleに示すように、最後の OL を という名前の DIV コンテナーにラップして、少し変更する必要があります。

<div id='foo'>
    <ol>
      <li>item</li>          <!-- 1     -->
      <li>item</li>          <!-- 2     -->
    </ol>
</div>

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

ラッパーを追加すると、カウンターはリセットされなくなり、数値は 4.1 および 4.2 から継続します。なんで？コンテナ内にラップされていても新しいカウンターをリセットする方法は? ありがとう

4

1 に答える 1

0

カウンター リセットを div に追加し、ラップされた ol に新しい値を割り当てます。フィドル: http://jsfiddle.net/mbmg52sz/3/

ol{
  counter-reset: sectionA;
  list-style-type: none;
}
li::before {
  counter-increment: sectionA;
  content: counters(sectionA,".") " ";
}

div{
    counter-reset: sectionA;
}

div > ol{
    counter-reset: sectionB;
}

div > ol > li{
    counter-increment: sectionB;
    content: counters(sectionB,".") " ";
}
于 2015-06-16T13:41:43.087 に答える