嵌套的无序列表

Question

我正在使用“条款和条件”页面的列表，为了使结构更整洁，我使用了有序列表。问题是我想使外部列表无序，而当我这样做时，它将丢失嵌套有序列表的计数。我知道我可以通过多种方式做到这一点，包括手动进行，但是我想知道是否有可能以某种方式处理这种情况。

<ol>
  <li>
    <h2>Title of section 1</h2>
    <ol>
      <li>Text 1.1
        <li>
          <li>Text 1.2
            <ol>
              <li>Text 1.2.1</li>
              <li>Text 1.2.2</li>
            </ol>
          </li>
    </ol>
    </li>
    <li>
      <h2>Title of section 2</h2>
      <ol>
        <li>Text 2.1
          <li>
            <li>Text 2.2
              <ol>
                <li>Text 2.2.1</li>
                <li>Text 2.2.2</li>
              </ol>
            </li>
      </ol>
      </li>
</ol>

使用CSS，我可以按原样显示一切

https://jsfiddle.net/tutancamon/bfhkqtdg/41/

我想要删除标题前面的数字，因为它已经包含标题...

Answer 1

无序列表元素<ul>听起来像您需要使用的元素。

ul {
  list-style: none;
}

<ul>
  <li>
    <h2>Title of section 1</h2>
    <ol>
      <li>Text 1.1
        <li>
          <li>Text 1.2
            <ol>
              <li>Text 1.2.1</li>
              <li>Text 1.2.2</li>
            </ol>
          </li>
    </ol>
    </li>
    <li>
      <h2>Title of section 2</h2>
      <ol>
        <li>Text 2.1
          <li>
            <li>Text 2.2
              <ol>
                <li>Text 2.2.1</li>
                <li>Text 2.2.2</li>
              </ol>
            </li>
      </ol>
      </li>
</ul>

Answer 2

像这样使用css属性list-style-type：

ol.outer {
  list-style-type: none;
}

但是，这将使编号混乱。您可以这样解决：

ol {
  list-style-type: none;
  counter-reset: item;
}

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

ol.outer>li::before {
  content: "";
}

<ol class="outer">
  <li>
    <h3>Section1</h3>
    <ol>
      <li> text1.</li>
      <li> text2 </li>
      <li> text3</li>
    </ol>
  </li>
  <li>
    <h3>section 2</h3>
    <ol>
      <li> text</li>
      <li> text</li>
      <li>
        <strong>Some texts</strong>
        <ol>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>