2

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

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

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？我需要包装 div

4

1 回答 1

5

从规范

计数器的范围从文档中的第一个元素开始，该元素对该计数器具有“计数器重置”，并包括该元素的后代及其后续兄弟姐妹及其后代。

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

这是一个以初始化mycounteronbody为例的更新。

而且还来自规范

如果元素或伪元素上的“计数器增量”或“内容”指的是不在任何“计数器重置”范围内的计数器，则实现应该表现得好像“计数器重置”已经重置了计数器在该元素或伪元素上为 0。

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

于 2015-04-25T08:04:21.563 回答