在单个 ol 列表中对嵌套列表进行编号

Question

我有一个有序列表，其中包含一些 li 标签。我希望带有 .sub-item class 的 li 标签是嵌套的 li 标签。有没有办法可以重置具有 class 的 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

但是使用 class 'sub-item' 我想要这种期望的行为

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

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

Answer 1

这会起作用。

.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>

Answer 2

您可以将列表嵌套在其他列表中，您可以通过嵌套混合使用有序列表和无序列表。使用 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>

Answer 3

如果您无法更改 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>

请注意，您需要多个嵌套部分，您需要在没有 .sub-item class 和 counter-reset 的元素上重置 sub-counter 属性.

Answer 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。）

在单个 ol 列表中对嵌套列表进行编号

Numbering a nested list in a single ol list

html

css

css-counter