在嵌套列表上的CSS计数器复位 [英] CSS counter-reset on nested list

问题描述

当ol在div中时，我在尝试使用 counter-reset 。
代码段编号中的红色列表应为：

1，2，3

< blockquote>

不是：

3.1，
3.2，
，

  ol {counter-reset：item; list-style：none;} li：before {counter-increment：item; content：counters（item，。）;}  

 < ol> < li> BBD< / li> < li> BBD< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol> < / li> < li> BBD< / li>< / ol>< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li>< / ol>< div> < ol style =color：red;> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol>< / div>  

http://jsfiddle.net/1dab8xs7/1/

counter-reset 属性，它与content属性和 > counters（）函数。此函数atomaticaly为每个嵌套元素添加一个新实例。这对于嵌套的 ol 元素是很好的，但是当第一级 ol 嵌套在任何其他元素。

所以你应该使用 counter（） ol 元素并保留第二级别的 counters（）（注意s）函数：

有关MDN的详情，请参阅嵌套计数器

  ol {counter-reset：item; list-style：none;} li：before {counter-increment：item; content：counter（item）。;} ol ol li：before {content：counters（item，。）;}   < ol> < li> BBD< / li> < li> BBD< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol> < / li> < li> BBD< / li>< / ol>< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li>< / ol>< div> < ol style =color：red;> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol>< / div>  

---

根据 @harry 的建议，您还可以将计数器重置为使用 li：first-child 伪类或 ol的 ol :: before 伪元素，示例：

  ol {list-style：none;} li：first-child {counter-reset：item;} / * orol：before {content：''; counter-reset：item;} * / li：before {counter-increment：item; content：counters（item，。）;}  

 < ol> < li> BBD< / li> < li> BBD< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol> < / li> < li> BBD< / li>< / ol>< ol> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li>< / ol>< div& < ol style =color：red;> < li> BBD< / li> < li> BBD< / li> < li> BBD< / li> < / ol>< / div>  

I'm struggling with counter-reset when ol is in div. Red list in the snippet numbering should be:

1, 2, 3

not:

3.1, 3.2, 3.3,

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}

<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

http://jsfiddle.net/1dab8xs7/1/

解决方案

Your issue isn't with the counter-reset property, it is with the content property and the counters() function. This function atomaticaly adds a new instance for each nested element. This is great for the nested ol elements but it also adds a counter instance when the first level ol is nested in any other element.

So you should use the counter() function on the first level ol elements and keep the counters() (notice the "s") function on the second level one :

More info on MDN about nesting counters

ol {
    counter-reset: item;
    list-style: none;
}
li:before {
    counter-increment: item;
    content: counter(item)". ";
}
ol ol li:before{
  content: counters(item,".") " ";
}

<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

---

As suggested by @harry, you can also set the counter reset on the first child of the ol element, either with the li:first-child pseudo class or with the ol::before pseudo element, example :

ol{
    list-style: none;
}
li:first-child{
    counter-reset: item;
}
/* or
ol:before {
    content: '';
    counter-reset: item;
}
*/
li:before {
    counter-increment: item;
    content: counters(item, ".")" ";
}

<ol>
    <li>BBD</li>
    <li>BBD
        <ol>
            <li>BBD</li>
            <li>BBD</li>
            <li>BBD</li>
        </ol>
    </li>
    <li>BBD</li>
</ol>

<ol>
    <li>BBD</li>
    <li>BBD</li>
    <li>BBD</li>
</ol>

<div>
    <ol style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

这篇关于在嵌套列表上的CSS计数器复位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！