如何实现多层列表样式：嵌套列表转方块并重置编号

要实现所有嵌套列表改为方块样式并重置编号序列，只需调整CSS选择器和计数器逻辑，具体修改如下：

修改后的CSS代码 #

/* 顶级有序列表基础样式 */
ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}

/* 仅顶级列表项应用数字编号 */
ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counter(item) ". ";
  display: table-cell;
  padding-right: 0.6em;
}

/* 嵌套列表（含ol/ul）统一设置 */
ol li ol,
ol li ul {
  list-style-type: none;
  padding-left: 1.2em; /* 增加缩进区分层级 */
  counter-reset: none; /* 重置计数器，不继承父级编号序列 */
}

/* 嵌套列表项样式 */
ol li li {
  display: table;
  margin: 0;
  counter-increment: none; /* 停止递增父级计数器 */
}

/* 嵌套列表项前显示方块符号 */
ol li li:before {
  content: "\25AA"; /* 可替换为\25A0（实心大方块）等符号 */
  display: table-cell;
  padding-right: 0.6em;
}

/* 保持无序列表基础样式 */
ul {
  list-style-type: none;
  padding-left: 0;
}

关键修改说明 #

1. 限定顶级列表的编号逻辑：将原来全局的li选择器改为ol > li，仅让顶级有序列表项递增计数器并显示数字编号，避免嵌套列表继承父级编号序列。
2. 嵌套列表统一方块样式：对所有嵌套的ol和ul设置统一的缩进和重置计数器，同时将嵌套列表项的before内容替换为方块符号。
3. 重置编号序列：通过counter-reset: none和counter-increment: none切断嵌套列表与父级计数器的关联，实现每个嵌套列表的序列独立重置。

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