使一个CSS属性依赖于另一个

19 浏览
0 Comments

使一个CSS属性依赖于另一个

我希望将我的一个CSS属性与另一个属性成比例地关联起来，但它们之间没有父级关系。它应该是这样的：\n

elem-to-look {
    /**
     * 这个值不能是显式的，
     * 并且我希望它在使用默认值时也能起作用。
     */
    width: 50px;
}
elem-derivative {
    /* 我正在寻找类似这样的解决方案 */
    left: [elem-to-look: width] + 25px;
}

\n这种可能吗？如果不行，你会建议我使用什么样的解决方案？

0

1 答案

0 Comments

问题：如何使一个CSS属性依赖于另一个属性？

出现原因：在某些情况下，我们希望一个CSS属性的值依赖于另一个属性的值。然而，CSS并没有直接提供这样的功能。

解决方法：如果我们的body元素的字体大小是固定的，并且在其父元素中没有更改，我们可以通过以下方式实现属性间的依赖关系：

body {
    font-size: 20px;
}
elem-to-look {
    width: 2.5em;
}
elem-derivative {
    left: calc(2.5em + 25px);
}

这样，elem-derivative元素的left属性将依赖于elem-to-look元素的宽度。我们假设elem-to-look元素的宽度是由手动或脚本生成的，并且我们知道这个值。

然而，这种方法并不是完美的解决方案。它假设elem-to-look和elem-derivative元素是兄弟元素，并且没有考虑它们的父元素。因此，这种方法并不适用于所有情况。

虽然CSS并没有直接提供属性间的依赖关系，但是在某些特定条件下，我们可以通过一些技巧来实现。在这种情况下，我们可以利用固定的字体大小和已知的宽度值来实现属性的依赖关系。然而，这种方法并不适用于所有情况，因此我们需要根据具体情况选择合适的解决方案。

0