对于html：
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
有没有办法创建一个使用其父值的递归变量：
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
以上是无效的,因为css variables cannot have dependency cycles.另一个无效的例子：
body > div {
--is-even: 0;
--is-odd: 1;
}
div {
--is-even: var(--is-odd);
--is-odd: var(--is-even);
}
是否有任何间接方式在css中表达这样的递归变量？
解决方法@H_404_16@
您可以使用两个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;
}
<body>
<div class="y">
<div class="x">
<div class="y">
<div class="x">
<div class="y">
<div class="x">
<div class="y result">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
如果检查元素,您将找到最后一个元素,即border-right等于17px(10 7),border-left等于16px(10 6)
这个想法非常适合具有2级结构的元素,如列表：
body {
--x: 30;
}
ul {
font-size: calc(var(--x) * 1px);
--y: calc(var(--x) - 8);
}
li {
--x: calc(var(--y));
}
<ul>level A
<li>item 1
</li>
<li>item 2
<ul>level B
<li>item 2.1
<ul>level C
<li>item 2.1.1
</li>
<li>item 2.1.2
</li>
</ul>
</li>
<li>item 2.2
</li>
</ul>
</li>
</ul>
这是一个例子：
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;
}
<body>
<div class="y">
<div class="x">
<div class="y">
<div class="x">
<div class="y">
<div class="x">
<div class="y result">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
如果检查元素,您将找到最后一个元素,即border-right等于17px(10 7),border-left等于16px(10 6)
这个想法非常适合具有2级结构的元素,如列表：
body {
--x: 30;
}
ul {
font-size: calc(var(--x) * 1px);
--y: calc(var(--x) - 8);
}
li {
--x: calc(var(--y));
}
<ul>level A
<li>item 1
</li>
<li>item 2
<ul>level B
<li>item 2.1
<ul>level C
<li>item 2.1.1
</li>
<li>item 2.1.2
</li>
</ul>
</li>
<li>item 2.2
</li>
</ul>
</li>
</ul>
