如何为除特定类及其子元素外的元素应用类样式？（嵌套场景）

最优方案：利用CSS变量的继承特性 #

这是最简洁且支持无限嵌套的方案，核心是通过CSS变量的就近继承特性，让li自动使用最近的样式类设置的颜色值，完全避开优先级冲突问题。

LESS代码实现：

// 全局默认文本颜色
:root {
  --list-text-color: black;
}

// 定义style-b类的颜色变量
.style-b {
  --list-text-color: rebeccapurple;
}

// 定义style-a类的颜色变量
.style-a {
  --list-text-color: black;
}

// 所有li统一应用变量颜色
li {
  color: var(--list-text-color);
}

编译后的CSS效果：

• 所有li会继承最近的祖先样式类中定义的--list-text-color变量值
• 嵌套在.style-a里的.style-b的li，会优先使用内层.style-b的变量，显示紫色
• 完全支持任意层级的嵌套，无需额外维护

备选方案：递归生成高优先级选择器（兼容旧浏览器） #

如果需要兼容不支持CSS变量的旧浏览器（如IE），可以用LESS的递归混合宏生成多层嵌套的选择器，通过提升选择器优先级来覆盖外层样式。

LESS代码实现：

// 递归生成多层嵌套的样式选择器，@depth控制最大支持的嵌套层数
.generate-list-style(@class, @color, @depth: 5) when (@depth > 0) {
  .@{class} {
    li {
      color: @color;
    }
    // 递归生成更深一层的嵌套选择器
    .generate-list-style(@class, @color, @depth - 1);
  }
}

// 为style-b生成样式
.generate-list-style(style-b, rebeccapurple, 5);
// 为style-a生成样式
.generate-list-style(style-a, black, 5);

编译后会生成从1层到5层的嵌套选择器（如.style-b li、.style-b .style-b li等），内层样式的选择器优先级更高，会覆盖外层的.style-a li样式。你可以根据实际需求调整@depth参数的数值。

为什么之前的方案失效？ #

1. 原始样式优先级冲突：.style-b li和.style-a li的选择器优先级完全相同，后声明的样式会覆盖先声明的，导致内层样式被外层覆盖。
2. :not()选择器限制：CSS规范中:not()内部不允许使用复合选择器（如.style-a *），所以无法通过这种方式排除嵌套元素。
3. .important类方案局限性：只能支持固定层级的嵌套，且需要手动修改DOM添加类，维护成本高。

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