如何简化嵌套ol列表的交替项目符号CSS/SCSS代码？

问题描述 #

我需要为ID为meaning的<ol>列表实现嵌套交替项目符号效果，原本的CSS通过重复编写10层嵌套选择器实现：

#meaning ol { list-style-type: circle; }
#meaning ol ol { list-style-type: disc; }
#meaning ol ol ol { list-style-type: circle; }
/* ... 重复定义至第10层嵌套 */

尝试用SCSS简化但未生效，自行编写的SCSS编译后仅生成重复的#meaning ol ol选择器，无法生成正确的多层嵌套规则，现寻求可行的简化方案。

可行解决方案 #

方案1：SCSS循环生成精准嵌套选择器

利用SCSS的@for循环自动生成10层嵌套的选择器，根据嵌套层级的奇偶性切换项目符号类型：

#meaning {
  // 循环生成1-10层嵌套的ol选择器
  @for $level from 1 through 10 {
    // 构建当前层级的ol选择器链（如第3层为"ol ol ol"）
    $selector-chain: '';
    @for $i from 1 through $level {
      $selector-chain: $selector-chain + 'ol';
      @if $i < $level {
        $selector-chain: $selector-chain + ' ';
      }
    }
    // 根据层级奇偶性设置符号类型
    #{$selector-chain} {
      list-style-type: if($level % 2 == 1, circle, disc);
    }
  }
}

编译后会完全还原你原本的CSS结构，且代码仅需维护循环次数和符号规则，避免重复编写。

方案2：CSS原生:nth-child结合:is()（现代浏览器兼容）

如果目标浏览器支持CSS选择器的现代特性，可通过:is()批量选择奇偶层级的嵌套ol，减少代码量：

#meaning ol {
  list-style-type: circle;
}
/* 选择第2、4、6...10层嵌套的ol */
#meaning ol :is(ol, ol ol ol, ol ol ol ol ol, ol ol ol ol ol ol ol, ol ol ol ol ol ol ol ol ol) {
  list-style-type: disc;
}

此方案无需预处理器，但需手动罗列偶数层级的选择器链，适合嵌套层数较少的场景。

方案3：CSS计数器+自定义项目符号（替代实现）

若不想依赖多层选择器，可通过CSS计数器模拟交替项目符号，同时用SCSS循环简化规则：

#meaning ol {
  list-style: none;
}

#meaning {
  @for $level from 1 through 10 {
    $selector-chain: '';
    @for $i from 1 through $level {
      $selector-chain: $selector-chain + 'ol';
      @if $i < $level {
        $selector-chain: $selector-chain + ' ';
      }
    }
    // 每层重置计数器
    #{$selector-chain} {
      counter-reset: list-counter 0;
      padding-left: 1.5em;
    }
    // 基于层级奇偶性设置项目符号
    #{$selector-chain} li {
      counter-increment: list-counter 1;
    }
    #{$selector-chain} li::before {
      content: counter(list-counter, if($level % 2 == 1, circle, disc)) ' ';
      margin-right: 0.5em;
    }
  }
}

此方案通过自定义伪元素内容实现符号，灵活性更高，同时避免了对原生列表样式的依赖。

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