gpt4 book ai didi

html - 递归变量可以用css表达吗?

转载 作者:太空狗 更新时间:2023-10-29 13:29:31 24 4
gpt4 key购买 nike

对于 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中有没有间接的方式来表达这样的递归变量?

最佳答案

您可以使用两个 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 )

enter image description here

这个想法非常适合具有 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>

关于html - 递归变量可以用css表达吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49973885/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com