0

我正在尝试使用 css 计数器为具有某些 html 类名的列表创建嵌套的计数器列表项。我从Mozilla的示例开始。.nested-list在我添加到 selector之前，一切都很好ol.nested-list>li:before。

这是我的css和html。

ol {
  counter-reset: section;
}
ol>li:before {
  counter-increment: section;
}
ol.nested-list {
  list-style-type: none;
}
ol.nested-list>li:before {
  content: counters(section, ".") " ";
}

<ol>
 <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol>
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

也在小提琴上

4

2 回答 2

0

增加每个列表项的计数器，而不是它的::before伪元素。

::before和::after元素不会在没有的情况下退出content。由于大多数列表项没有content它们的::before元素，因此该元素不存在，并且嵌套section计数器未正确递增。

ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

ol.nested-list {
  list-style-type: none;
}

ol.nested-list>li:before {
  content: counters(section, ".") " ";
}
<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

于 2018-04-03T18:45:20.610 回答
0

我真的不知道你想达到什么目标，为什么你需要在.nested-list那里上课。无论如何，我把她的两个解决方法都可以解决你的问题。

第一：没有任何类 这将为所有列表添加顺序编号

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

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

注意：在您的代码中，您有ol>li但没有必要添加直接育儿，因为<li>只能存在于您的内部，<ol>所以我减少了您的代码。

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

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

第二： .nested-list Workarround 您可以“隐藏”所有::before内容并“取消隐藏”第一级，ol.nested-list如果您删除直接>育儿，您可以在里面的所有子列表中拥有这种列表.nested-li

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

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
  visibility: hidden;
}
.nested-list > li::before{
  visibility: visible;
}

例子：

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

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
  visibility: hidden;
}
.nested-list > li::before{
  visibility: visible;
}
<ol>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry with subentries
        <ol>
          <li>Entry</li>
          <li>Entry</li>
        </ol>
      </li>
      <li>Entry</li>
    </ol>
  </li>
  <li>Entry</li>
  <li>Entry with subentries
    <ol class="nested-list">
      <li>Entry</li>
      <li>Entry</li>
    </ol>
  </li>
</ol>

注意：为了使用，::before最好::after添加两个克隆::

于 2018-04-03T18:53:03.747 回答