嵌套列表上的 CSS 计数器重置答案

【问题标题】：CSS counter-reset on nested list嵌套列表上的 CSS 计数器重置
【发布时间】：2015-10-10 22:34:15
【问题描述】：

当 ol 在 div 中时，我正在与 counter-reset 斗争。 sn -p 编号中的红色列表应该是：

1、2、3

不是：

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/

【问题讨论】：

标签： css css-counter

【解决方案1】：

您的问题不在于 counter-reset 属性，而在于 content 属性和 counters() 函数。此函数自动为每个嵌套元素添加一个新实例。这对于嵌套的 ol 元素非常有用，但是当第一级 ol 嵌套在任何其他元素中时，它也会添加一个计数器实例。

所以你应该在第一级ol元素上使用counter()函数，并在第二级保留counters()（注意“s”）函数：

关于nesting counters的更多信息在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::before 伪元素在ol 元素的第一个子元素上设置计数器重置，例如：

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>

【讨论】：

【解决方案2】：

您必须重置div
并且“不重置”ol
像这样：

<div style="color:red;counter-reset: item;">
    <ol style="color:red;counter-reset: none;" id="test">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

【讨论】：

【解决方案3】：

解决此问题的一种方法是添加一个类（因为您无法根据其父元素选择元素），并使用 :not 伪类将其从初始选择中排除：

HTML：

<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 class="x" style="color:red;">
        <li>BBD</li>
        <li>BBD</li>
        <li>BBD</li>
    </ol>
</div>

CSS：

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

根据this JSFiddle

【讨论】：