CSS是否支持递归变量？嵌套div场景下如何实现？

好问题！确实，CSS变量的规范明确禁止循环依赖（比如--a: var(--b); --b: var(--a);这种互相引用的闭环情况），所以你给出的直接递归赋值写法都会失效。不过我们有几种间接的方式来实现类似的“嵌套层级递增值”效果，下面分别介绍：

1. 利用CSS计数器（最省心的原生方案） #

CSS计数器是专门为嵌套/递归计数设计的原生特性，完全不会有循环依赖的问题，刚好适配这种多层嵌套div的场景。你可以定义一个计数器，让每个div自动递增它的值，然后通过counter()或counters()来获取层级数值：

body {
  counter-reset: nesting-depth 0; /* 初始化计数器，起始值为0 */
}

div {
  counter-increment: nesting-depth 1; /* 每个div层级都让计数器+1 */
  
  /* 示例：用计数器值设置变量，或者直接用于样式 */
  --depth: counter(nesting-depth);
  /* 如果需要数值计算，可以把计数器转成整数（注意counter返回字符串，结合calc时要确保类型兼容） */
  --spacing: calc(var(--depth) * 10px);
  
  /* 可视化演示：在div前显示层级 */
  &::before {
    content: "层级 " var(--depth) ":";
    margin-left: var(--spacing);
  }
}

这个方案的优势是完全原生、自动适配任意嵌套深度，不需要手动维护层级，非常适合动态生成的嵌套结构。

2. 用“父级变量传递”避免循环依赖 #

你之前的写法之所以触发循环，是因为直接让子级的变量引用自身的另一个变量形成闭环。我们可以通过区分父级变量和当前变量的方式来规避这个问题：

/* 最外层div（body的直接子元素）初始化 */
body > div {
  --parent-level: 0;
  --current-level: calc(var(--parent-level) + 1);
}

/* 所有内层div继承父级的current-level作为自己的parent-level */
div > div {
  --parent-level: var(--current-level);
  --current-level: calc(var(--parent-level) + 1);
}

这里的关键是：子级的--parent-level引用的是父级已经计算完成的--current-level值，而不是自身的变量，所以不会形成循环依赖。每个层级的--current-level都会正确继承父级的数值并+1，实现递归递增的效果。

你可以用这个--current-level变量做任何数值计算，比如调整内边距、字体大小、定位偏移等：

div {
  padding-left: calc(var(--current-level) * 15px);
  border-left: 2px solid #ccc;
}

3. 预处理器生成固定层级样式（适合已知最大深度的场景） #

如果你的嵌套层级是固定且有限的，可以用Sass/Less这类预处理器的循环功能自动生成对应层级的变量赋值：

// Sass示例：生成最多10层的样式
@max-depth: 10;

body > div {
  --x: 1;
}

@for $i from 2 through @max-depth {
  body > #{str-repeate("div > ", $i - 1)}div {
    --x: #{$i};
  }
}

这个方案的缺点是无法适配动态生成的无限嵌套结构，但如果你的场景层级明确，这也是一个简单直接的方法。

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