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

Question

当 ol 在 div 时，我正在与 counter-reset 作斗争。代码段编号中的红色列表应为：

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/

Answer 1

您必须重置 div
并且 "not reset" 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>

Answer 2

解决这个问题的一种方法是添加一个 class（因为你不能 select 一个基于其父元素的元素），并将其从初始 select 中排除带有 :not 伪 class 的离子：

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

Answer 3

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

因此，您应该在第一级 ol 元素上使用 counter() 函数，并在第二级元素上保留 counters()（注意 "s"）函数：

有关 MDN 的更多信息 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>

如 @harry 所建议，您还可以使用 li:first-child 伪 class 或 ol 元素的第一个子元素设置计数器重置ol::before 伪元素，例如：

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 嵌套列表上的计数器重置

CSS counter-reset on nested list

css

css-counter