html - 列表，html中的子列表

Question

如何组织 html 代码（使用 ol\li、ul\li 等）来呈现这样的列表（带有子列表）？

1. Section
    1.1. subsection
    1.2. subsection
    1.3. subsection
2. Section
3. Section
    3.1. subsection
           • text
           • text
           • text
    3.2. subsection
    3.3. subsection


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

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

<ol>
  <li>Section
    <ol>
      <li>subsection</li>
      <li>subsection</li>
      <li>subsection</li>
    </ol>
  </li>
  <li>Section</li>
  <li>Section
    <ol>
      <li>subsection</li>
      <ul>
       <li>text</li>
       <li>text</li>
       <li>text</li>
      </ul>
      <li>subsection</li>
      <li>subsection</li>
    </ol>
  </li>
</ol>

注意：这里不一样我要输入图片描述

到目前为止，使用只生产了 1、1.1、1.2、1.3、2.、3.、3.1.、3.2.、3.3、3.4.、3.5.、3.6。

不是 1, 1.1, 1.2, 1.3, 2., 3., 3.1., •, •, •, 3.2., 3.3,

我想就这些了，谢谢！

标签： htmlhtml-lists

Answer 1

我认为这个问题li:before也适用于无序列表中的元素。试试这个，让我知道它是否有效：

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

li:before {
  content: counters(section, ".") ". ";
  counter-increment: section;
  color: #BA4917;
}

ul li:before {
  content: "";
}

<ol>
  <li>Section
    <ol>
      <li>subsection</li>
      <li>subsection</li>
      <li>subsection</li>
    </ol>
  </li>
  <li>Section</li>
  <li>Section
    <ol>
      <li>subsection
        <ul>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ul>
      </li>
      <li>subsection</li>
      <li>subsection</li>
    </ol>
  </li>
</ol>