如何用CSS实现多级混合列表？当前方案计数器误作用于无序列表

你的问题出在选择器ol li:before会匹配所有ol后代中的li，包括嵌套在ul里的li，导致无序列表也被加上了计数器编号。可以通过精准控制选择器和计数器层级来解决：

修正后的CSS代码 #

/* 初始化顶级ol的计数器，移除默认列表样式 */
ol {
  counter-reset: section;
  list-style-type: none;
  padding-left: 1.8em;
}

/* 仅给ol的直接子元素li添加顶级计数器 */
ol > li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-right: 0.6em;
}

/* 嵌套ol初始化子级计数器，调整缩进 */
ol ol {
  counter-reset: subsection;
  padding-left: 1.8em;
}

/* 嵌套ol的直接子li使用子级计数器，拼接父级编号 */
ol ol > li:before {
  counter-increment: subsection;
  content: counters(section, ".") "." counters(subsection, ".") " ";
}

/* 无序列表保持默认样式，避免被计数器影响 */
ul {
  list-style-type: disc;
  padding-left: 1.8em;
  margin: 0.5em 0;
}

/* 嵌套在ol里的ul，使用更浅的项目符号区分层级 */
ol ul {
  list-style-type: circle;
}

对应的HTML结构示例 #

<ol>
  <li>一级有序列表项
    <ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
    </ul>
  </li>
  <li>一级有序列表项
    <ol>
      <li>二级有序列表项</li>
      <li>二级有序列表项
        <ul>
          <li>嵌套无序列表项</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

以上设置后，只有有序列表会生成层级编号，无序列表保持默认的项目符号，不会被计数器干扰。如果需要更深层级的有序列表，可以继续添加对应层级的计数器规则（比如ol ol ol和配套的计数器定义）。

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