可以用css表示递归变量吗？

对于html:

  

    

      ...
    
  

有没有办法创建一个使用其父值的递归变量:

body > div {
    --x: 1;
}

div {
    --x: calc(var(--x) + 1);
}

以上内容无效,因为css变量不能具有依赖循环.另一个无效的例子

body > div {
    --is-even: 0;
    --is-odd: 1;
}

div {
    --is-even: var(--is-odd);
    --is-odd: var(--is-even);
}

是否有任何间接方式在css中表达这样的递归变量？

您可以使用两个CSS变量来模拟递归行为并避免循环依赖.

这是一个例子:

body {
  --x: 10;
}
.y {
  --y: calc(var(--x) + 1);
}
.x{
  --x: calc(var(--y) + 1);
}
.result {
  border-right:calc(1px * var(--y)) solid red;
  border-left:calc(1px * var(--x)) solid green;
  height:50px;
}