为单个 ol 列表中的嵌套列表编号答案

【问题标题】：Numbering a nested list in a single ol list为单个 ol 列表中的嵌套列表编号
【发布时间】：2022-02-11 22:01:15
【问题描述】：

我有一个有序列表，其中包含一些 li 标记。我希望带有.sub-item 类的li 标签是嵌套的li 标签。有没有办法可以重置具有类的 li 标签的编号？名单如下：

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
</ol>

目前我明白这是有道理的：

  1 One
  2 Two
  3 Three
  4 Sub Three 1
  5 Sub three 2
  6 Four

但是使用类“子项”我想要这种期望的行为

  1 One
  2 Two
  3. Three
     a Sub three 1
     b Sub Three 2
  4 Four

我不能改html部分的代码，只能写css。在这种情况下添加嵌套的ol 标签将不起作用，因为我无法修改 html。

【问题讨论】：

有什么理由不能使用正确的嵌套列表来代替吗？
我正在使用一个库，该库返回嵌套列表而不添加另一个

标签： html css css-counter

【解决方案1】：

如果您无法更改 HTML 标记，您可以使用CSS counters模拟单个列表上的嵌套编号。

您需要删除默认的list-style-type 并添加带有伪元素的计数器。
.sub-item 元素可以有自己的计数器（在以下示例中为sub-counter），这不会影响设置所有<li> 元素（以下示例中为main-counter）：

ol {
  counter-reset: main-counter, sub-counter;
  list-style-type:none;
  padding:0;
}
li {
  counter-increment: main-counter;
  counter-reset: sub-counter;
}
li::before {
  content: counter(main-counter) ". ";
}
li.sub-item {
  counter-increment: sub-counter;
  padding-left:1em;
  counter-reset: none;
}
li.sub-item::before {
  content: counter(sub-counter, lower-alpha) ". ";
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Eight</li>
</ol>

请注意，如果您需要多个嵌套部分，则需要使用 counter-reset 属性在没有 .sub-item 类的元素上重置 sub-counter。

【讨论】：

【解决方案2】：

这会起作用。

.sub-item {
    list-style-type: lower-alpha;
}

<ol>
    <li>One</li>
    <li>Two</li>
    <li>THree
        <ol>
            <li class="sub-item">Sub three 1</li>
            <li class="sub-item">Sub three 2</li>
        </ol>
    </li>
    <li>Four</li>
</ol>

【讨论】：

由于某些限制原因，我无法添加嵌套的 ol 标签。只能通过定位类名来修改 CSS。

【解决方案3】：

您可以将列表嵌套在其他列表中，您可以通过嵌套混合有序列表和无序列表。使用start属性更改起始编号。

    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
        <ol start='5'>
          <li>Five</li>
          <li>Six</li>
          <li>Seven</li>
        </ol>
      <li>Four</li>
    </ol>

【讨论】：

【解决方案4】：

由于不能修改 HTML 标记，最简单的解决方案是使用 Javascript 进行更正：

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll("li.sub-item:not(.sub-item ~ .sub-item)").forEach(el => {
    const parentItem = el.previousElementSibling;
    if (!parentItem) {
      return;
    }

    const items = [];
    for (let li = el; li && li.classList.contains("sub-item"); li = li.nextElementSibling) {
      items.push(li);
    }

    const ol = document.createElement("ol");
    ol.setAttribute("type", "a");
    items.forEach(li => ol.appendChild(li));
    parentItem.appendChild(ol);
  });
});

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
</ol>

（.sub-item:not(.sub-item ~ .sub-item) 语法来自 this answer。）

【讨论】：