用包装 div 反增量

Question

我想对有序列表使用反增量。我希望每个 ol 继续之前的计数。

当我没有在 ol 周围单独包装 div 时，它会起作用。请注意，它适用于同一包装 div 内的第二个 ol，但它对下两个具有单独包装 div 的 ol 停止工作：

http://jsfiddle.net/graphic_dev/Lsn49t16/1/

HTML

<div class="wrapper">
    <ol class="split start">
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ol>

    <ol class="split">
      <li>Sit</li>
      <li>Amet</li>
    </ol>
</div>

<div class="wrapper">
    <!-- It stops working here -->
    <ol class="split">
      <li>Consectetur</li>
      <li>Adipiscing </li>
    </ol>

    <ol class="split">
      <li>Elit</li>
      <li>Sed</li>
    </ol>
</div>

CSS

.start {
    counter-reset: mycounter;
}

.split {
    list-style-type: none;
}

.split li:before {
    counter-increment: mycounter;
    content: counter(mycounter, upper-alpha);
}

如何让它继续为每个 ol 计数？我需要包装 divs

Answer 1

来自Spec

The scope of a counter starts at the first element in the document that has a 'counter-reset' for that counter and includes the element's descendants and its following siblings with their descendants.

因此，您需要在列表的环绕元素或第一个 <div class="wrapper"> 上调用 counter-reset。

Here's an update 以在 body 上初始化 mycounter 为例。

也来自规范

If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset', implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.

所以第二个 div 中的列表项实际上为每个项目初始化了一个计数器。

用包装 div 反增量

Counter-increment with wrapping divs

html

css

css-counter