Chrome（Electron）下实现特殊编号无缩进嵌套列表的CSS方案咨询

针对你需要的嵌套列表样式（外层数字、内层带外层前缀的小写字母编号，无缩进，兼容Chrome/Electron），我推荐使用CSS计数器来实现——这个方案完全不依赖@counter-style，兼容性拉满，而且能完美满足你的需求。

实现思路 #

利用CSS的counter-reset和counter-increment来跟踪外层、内层的列表项计数，通过伪元素::before生成自定义编号，同时重置默认列表样式并调整排版，让内层列表和外层视觉上无缩进对齐。

完整代码示例 #

HTML结构

用标准嵌套<ol>即可，结构清晰：

<ol class="outer-list">
  <li>列表项</li>
  <li>
    <ol class="inner-list">
      <li>另一列表项</li>
      <li>又一列表项</li>
    </ol>
  </li>
  <li>第三个列表项</li>
  <li>
    <ol class="inner-list">
      <li>第四个列表项的子项1</li>
      <li>第四个列表项的子项2</li>
    </ol>
  </li>
</ol>

CSS样式

/* 重置所有列表的默认样式，消除自带缩进和编号 */
ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 外层列表：初始化计数器 */
.outer-list {
  counter-reset: outer-counter;
}

.outer-list > li {
  counter-increment: outer-counter;
  position: relative;
  padding-left: 2em; /* 给编号预留左侧空间 */
  margin: 0.5em 0; /* 控制列表项间距 */
}

/* 生成外层的数字编号（如1)、2)） */
.outer-list > li::before {
  content: counter(outer-counter) ")";
  position: absolute;
  left: 0;
}

/* 内层列表：初始化自己的计数器 */
.inner-list {
  counter-reset: inner-counter;
  margin: 0.5em 0; /* 和外层列表项间距保持一致 */
}

.inner-list > li {
  counter-increment: inner-counter;
  position: relative;
  padding-left: 2em; /* 和外层列表项的左侧对齐 */
  margin: 0.3em 0; /* 控制内层项的间距 */
}

/* 生成带外层前缀的字母编号（如2a)、2b)） */
.inner-list > li::before {
  content: counter(outer-counter) counter(inner-counter, lower-alpha) ")";
  position: absolute;
  left: 0;
}

方案优势 #

1. 兼容性强：CSS计数器是Chrome/Electron完全支持的特性，不存在@counter-style的兼容问题；
2. 无多余标记：通过list-style: none彻底隐藏默认编号，不会出现你之前遇到的多余标记问题；
3. 视觉对齐：通过position: absolute定位编号，配合统一的padding-left，让内层列表和外层完全无缩进对齐；
4. 可扩展性：如果需要更深层级的嵌套，只需要新增对应计数器和伪元素规则即可。

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