与包装div的反增量 [英] Counter-increment with wrapping divs

问题描述

我想在有序列表上使用反递增。我希望每个 ol 继续上一次计数。

当我没有单独的换行div围绕 ol s。请注意，它适用于同一个包装div内的第二个 ol ，但它会停止为接下来的两个 ol s有一个单独的包装div：

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

HTML

 < div class =wrapper> 
 
< li> Lorem< / li> 
< li> Ipsum< / li> 
< li> Dolor< / li> 
< / ol> 
 
 
< li>坐< / li> 
< li> Amet< / li> 
< / ol> 
< / div> 
 
< div class =wrapper> 
 <！ - 停止在这里工作 - > 
< ol class =split> 
< li> Consectetur< / li> 
< li> Adipiscing< / li> 
< / ol> 
 
 
< li> Elit< / li> 
< li> Sed< / li> 
< / ol> 
< / div> 
  

CSS

  .start {
 counter-reset：mycounter; 
} 
 
 .split {
 list-style-type：none; 
} 
 
 .split li：之前{
 counter-increment：mycounter; 
 content：counter（mycounter，upper-alpha）; 
} 
  

如何获得每个醇？我需要包装divs

解决方案

从规范

计数器的范围从第一个元素开始在该计数器有一个反复位的文档中，并包含元素的后代及其后代与他们的后代的兄弟姐妹。

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

这是一个更新，它初始化 body 上的 mycounter 作为示例。

同样来自spec

如果元素或伪元素上的counter-increment或content指向到一个不在任何反复位范围内的计数器'，那么实现应该像'counter-reset'将计数器重置为该元素或伪元素上的0一样。

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

I want to use a counter-increment on ordered lists. I want each ol to continue on the previous count.

It works when I don't have separate wrapping divs around the ols. Note that it works for the second ol which is within the same wrapping div, but it stops working for the next two ols which has a separate wrapping div:

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);
}

How do I get it continuing the count for each ol? I need the wrapping divs

解决方案

From the 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.

So, you need to call the counter-reset on the wrapping element of your lists, or the first <div class="wrapper">.

Here's an update which initialize the mycounter on body as an example.

And also from the spec

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.

so the list item in the second div actually initialized a counter for each of the items.

这篇关于与包装div的反增量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！