添加.nested-list类后CSS嵌套计数器显示为零的问题求助

我来帮你分析下问题所在：你遇到的计数器显示为0的情况，核心原因是CSS选择器优先级和计数器递增规则的覆盖问题。

先看你的代码：

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.nested-list>li:before这个选择器的优先级比ol>li:before更高。当浏览器渲染带nested-list类的<ol>下的<li>伪元素时，只会应用ol.nested-list>li:before里的规则——但这个规则里没有包含counter-increment: section;，导致计数器根本没有被递增，一直停留在初始的0值。

修复方案 #

你有两种简单的修复方式：

方式1：合并选择器，把递增规则加入高优先级选择器

修改CSS，把counter-increment放到ol.nested-list>li:before的规则里，确保计数器能正常递增：

ol { counter-reset: section; }
ol.nested-list { list-style-type: none; }
ol.nested-list>li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
/* 如果需要保留普通ol的计数器逻辑，保留这条规则 */
ol:not(.nested-list)>li:before {
  counter-increment: section;
}

方式2：调整规则顺序，让递增规则生效

或者，你可以把ol>li:before的规则放在ol.nested-list>li:before之后，利用CSS规则顺序的优先级覆盖，让递增逻辑被应用：

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

多层嵌套列表的完整实现（可选） #

如果你要实现真正的层级嵌套计数器（比如1.1、1.2这类层级编号），还需要给子列表重置新的计数器，示例代码如下：

ol.nested-list {
  list-style-type: none;
  counter-reset: section;
}
ol.nested-list>li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
/* 子列表重置新计数器 */
ol.nested-list ol {
  counter-reset: subsection;
  margin-left: 20px;
}
ol.nested-list ol>li:before {
  counter-increment: subsection;
  content: counters(section, ".") "." counters(subsection, ".") " ";
}

对应的HTML结构：

<ol class="nested-list">
  <li>Entry</li>
  <li>Entry with subentries
    <ol>
      <li>Subentry</li>
      <li>Another subentry
        <ol>
          <li>Deep nested entry</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Final entry</li>
</ol>

这样就能正确显示层级化的计数器啦~

内容的提问来源于stack exchange，提问作者sidon