html - CSS 计数器：如果 OL 外有包装器，则不会重置

Question

我尝试OL使用“ CSS 计数器”创建自定义有序列表 ()，以这篇 Mozilla 文章为例。

我需要稍微修改它，将最后一个 OL 包装在一个名为 的 DIV容器.foo中，如此jsFiddle所示。

<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 继续。为什么？即使包装在容器中，如何重置新计数器？谢谢

Answer 1

将计数器重置添加到 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,".") " ";
}