Question

我想使用CSS计数器来使订单列表以特定数字（7）开始。我已经成功地使它从正确的数字开始，但是问题是子列表也从该数字开始。

// HTML

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>
      <p>Fourth item - nested ordered list:</p>
      <ol>
        <li>
            <p>Fourth item - nested ordered list:</p>
            <ol>
        <li>A</li>
        <li>B</li>
        </ol>
    </li>
        <li>Second nested item</li>
      </ol>
    </li>
    <li>Fifth item</li>
  </ol>

// CSS

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

预期：我希望列表以以下顺序开头：
7.第一项
8.
9.
10.
  10.1
    10.1.1
    10.1.2

实际结果：
7.第一项
8.
9.
10.
  10.7
    10.7.7
    10.7.8

Answer 1

您可以通过简单地为顶层定义不同的计数器来解决此问题：

ol { counter-reset: item; list-style: none; }
body > ol { counter-reset: item 6; list-style: none; }

如果最外面的ol是body的直接子代，则这对于给出的简单示例将起作用。如果不是，则可以在选择器中使用其他父元素，或将类添加到外部ol，例如

<ol class="outer">

ol { counter-reset: item; list-style: none; }
ol.outer { counter-reset: item 6; list-style: none; }

特定编号的CSS计数器

1 个答案: