时间戳

首页 > 解决方案 > 自定义嵌套有序列表编号

html - 自定义嵌套有序列表编号

问题描述

我有嵌套列表，我无法更改其结构。第一个li元素不能包含在编号中，但是，它的子元素必须全部编号。这是JsFiddle。

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

ol li ol li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
<ol id="root">
  <li>List item two with subitems (this should not be numbered):
    <ol id="toc0">
      <li>Subitem 1 (This should be numbered 1)</li>
      <li>Subitem 2 (This should be 2)</li>
      <ol>
        <li> subitem (this should be 2.1)</li>
        <li> subitem (this should be 2.2)</li>
        <ol>
          <li> subitem (This should be 2.2.1)</li>
          <li> subitem (This should be 2.2.2)</li>
        </ol>
      </ol>
      <li>Subitem 3 (This should be 3)</li>
      <li>Subitem 4 (This should be 4)</li>
    </ol>
  </li>
</ol>

标签： htmlcsshtml-lists

解决方案

您的标记无效，ol不能是另一个的直接子级ol。您必须更新 HTML 来修复它，您现有的 CSS 只需稍加编辑即可正常工作。

ol {
  list-style: none;
}

ol li ol {
  counter-reset: section;
}

ol li ol li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
<ol id="root">
  <li>List item two with subitems (this should not be numbered):
    <ol id="toc0">
      <li>Subitem 1 (This should be numbered 1)</li>
      <li>
        Subitem 2 (This should be 2)
        <ol>
          <li>subitem (this should be 2.1)</li>
          <li>
            subitem (this should be 2.2)
            <ol>
              <li> subitem (This should be 2.2.1)</li>
              <li> subitem (This should be 2.2.2)</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>Subitem 3 (This should be 3)</li>
      <li>Subitem 4 (This should be 4)</li>
    </ol>
  </li>
</ol>

推荐阅读