Question

标题标题不言自明。手动完成此示例：

<head>
  <style>
    .toc {
      border: thin solid lightgray;
      background-color: whitesmoke;
    }
  </style>
</head>


<body>

  <h1>Article title</h1>
  <hr />
  <p>Some introductory text.</p>

  <span id="toc">
    <table class="toc">
      <thead>
        <tr>
          <th>Contents</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <ol>
              <li><a href="#1">Heading</a></li>
              <ol>
                <li><a href="#1.1">Sub-heading</a></li>
                <ol>
                  <li><a href="#1.1.1">Sub-sub-heading</a></li>
                </ol>
              </ol>
              <li><a href="#2">Second heading</a></li>
              <ol>
                <li><a href="#2.1">Second sub-heading</a></li>
                <ol>
                  <li><a href="#2.1.1">Second sub-sub-heading</a></li>
                </ol>
              </ol>
              <li><a href="#3">See also</a></li>
              <li><a href="#4">Notes &amp; References</a></li>
              <li><a href="#5">Further reading</a></li>
              <li><a href="#6">External links</a></li>
            </ol>
          </td>
        </tr>
      </tbody>
    </table>
  </span>

  <div id="Contents">
    <h1 id="1">Heading</h1>
    <hr />
    <h2 id="1.1">Sub-heading</h2>
    <h3 id="1.1.1">Sub-sub-heading</h3>
    <h1 id="2">Second heading</h1>
    <hr />
    <h2 id="2.1">Second sub-heading</h2>
    <h3 id="2.1.1">Second sub-sub-heading</h3>
    <h1 id="3">See also</h1>
    <hr />
    <h1 id="4">Notes &amp; References</h1>
    <hr />
    <h1 id="5">Further reading</h1>
    <hr />
    <h1 id="6">External links</h1>
    <hr />
  </div>

</body>

问题：

请注意，嵌套列表从1开始重新开始计数，而不是从父枚举开始（例如＆＃34; 1,1.1,1.1.1和＃34;）。
手动执行此操作非常耗时。
所有及时提供的＆＃34;目录＆＃34;默认情况下，库不起作用或样式，如Wikipedia文章中的库。大多数这些库并不完全＆＃34;轻量级＆＃34;这也是一种不便。

Answer 1

您可以使用forRoot(), more on that here.调整以呈现预期结果

＆＃13;

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

＆＃13;

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

＆＃13;

使用JavaScript自动生成维基百科样式的目录

1 个答案: