包装div的反增量

时间:2015-04-25 07:45:42

标签: html css css-counter

我想在有序列表上使用反增量。我希望每个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

1 个答案:

答案 0 :(得分:5)

来自Spec

  

计数器的范围从文档中第一个元素开始,该元素具有该计数器的“反复位”,并包含元素的后代及其后代兄弟及其后代。

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

Here's an updatemycounter初始化body为例。

还来自规范

  

如果元素或伪元素上的'counter-increment'或'content'指的是不在任何'counter-reset'范围内的计数器,那么实现应该表现得像'counter-reset'那样在该元素或伪元素上将计数器重置为0.

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