CSS counter is zero when selector contains class name

Question

我正在尝试使用 css 计数器为具有某些 html class 名称的列表创建嵌套计数器列表项。我从 mozilla 的样本开始。一切正常，直到我将 .nested-list 添加到选择器 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>

Also on fiddle

Answer 1

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

::before 和 ::after 元素在没有 content 的情况下不会退出。由于大多数列表项的 ::before 元素没有 content，因此该元素不存在并且嵌套的 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>

Answer 2

我真的不知道你想达到什么目的，为什么你需要 .nested-list class。无论如何，我提出了两个可以解决您问题的解决方法。

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

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 解决方法 您可以 "hide" 所有 ::before 内容和 "unhide" 第一级 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的使用，最好添加两个clon ::

CSS counter is zero when selector contains class name

CSS counter is zero when selector contains class name

css

css-counter