html – 递归变量可以用css表示吗？_html-js-css

概述对于html： <body><div> <div> <div> ... </div> </div></div></body> 有没有办法创建一个使用其父值的递归变量： body > div { --x: 1;}div { --x: calc(var(--x) + 1);} 以上是无效的,因为css variables cannot 对于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 >    <div >      <div >        <div >          <div >            <div >              <div >              </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>

总结

以上是内存溢出为你收集整理的html – 递归变量可以用css表示吗？全部内容，希望文章能够帮你解决html – 递归变量可以用css表示吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1133678.html