html - CSS列表计数器增加级别

Question

HTML

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

SCSS

ol {
  counter-reset: item;
  li {
    display: block
  }
  li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
  }
}

现在列表的顺序如下：

1. 项目1

1.1。项目2

2. 项目1

2.1。项目2

2.2. 第 3 项

有什么办法可以在列表的开头将排序增加一级？第二个<ol>将从2：2.1开始。项目1

1.1。项目1

1.1.1。项目2

1.2. 项目1

1.2.1。项目2

1.2.2。第 3 项

--------同一父级中的第二个ol---------

2.1。项目1

2.1.1。项目2

2.2. 项目1

2.2.1。项目2

2.2.2。第 3 项

笔在这里：http ://codepen.io/simPod/pen/wawOLd

Answer 1

您可以设置一个额外的计数器并仅在外部列表上更新它（可以通过选择body > ol）

更新了 Codepen

body {
  counter-reset: outer;
}
body > ol {
  counter-increment: outer;
}
ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol > li:before {
  content: counter(outer)"." counters(item, ".")". ";
  counter-increment: item;
}

<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>
<ol>
  <li>item1
    <ol>
      <li>item2</li>
    </ol>
  </li>
  <li>item1
    <ol>
      <li>item2</li>
      <li>item3</li>
    </ol>
  </li>
</ol>

Answer 2

不确定这是否有用，但是；刚刚通过 CSS 实现了这一点。必须在 CSS 中指定起始值，因此它可能不适合您。

和CSS：

       body ol { 
            list-style-type: none;
            counter-reset: level1 50;
        }
        ol li:before {
            content: counter(level1) ". ";
            counter-increment: level1;
        }
        ol li ol {
            list-style-type: none;
            counter-reset: level2;
        }
        ol li ol li:before {
            content: counter(level1) "." counter(level2) " ";
            counter-increment: level2;
        }

在这种情况下，您会得到：

50 项

50.1 子项

Answer 3

你可以试试 counter-reset 属性（http://www.w3schools.com/cssref/pr_gen_counter-reset.asp）

您将声明：counter-reset: section;在封闭元素上，然后：

ol li { counter-reset: subsection; }
ol li:before {
    counter-increment: section;
    content: counter(section) ".";
}
ol li ol li { counter-reset: subsection; }
ol li ol li:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) ".";
}
etc...