解释此 CSS 自定义属性行为 [重复]

Question

我很难用 CSS 变量理解以下内容，我相信代码本身就说明了问题，否则请告诉我。

:root {
    --color: red;
    --hover-color: var(--color);
}

div {
    --color: green;

    background: var(--color);
}

div:hover {
    background: var(--hover-color);
}

<div>
Why am I red on hover? Shouldn't I be green? When inspecting this element on hover, chrome shows the green color!?
</div>

让我绝对困惑的是，在 Chrome Devtools 中检查元素时，它显示悬停颜色为绿色？？

Answer 1

--hover-color 解析为它所在作用域的--color 值，这意味着它将计算当时检测到的值。这是为了避免依赖循环。你可以阅读these cycles in the specification document。

自定义属性几乎完全不计算，除了它们允许并计算 var() 函数的值。这可能会创建循环依赖关系，其中自定义属性使用 var() 引用自身，或者两个或多个自定义属性都尝试相互引用。

为防止这种情况，您需要稍微扩展一下，然后执行以下操作：

:root {
    --color: red;
    --hover-color: var(--color);
}

div {
    --color: green;
    --hover-color: var(--color); /* Added this here */

    background: var(--color);
}

div:hover {
    background: var(--hover-color);
}

<div>
I am green on hover, as expected.
</div>

但这引发了 Chrome 的 DevTools 的一个有趣问题，它确实在悬停状态的背景值旁边显示了绿色预览。您可能想file an issue 并对此进行调查。

Answer 2

您正在做的是，您正在创建一个变量然后将颜色传递给它，纯粹是我的想法不知道这是不是原因

假设它是一个 javascript 变量，那么

var color = red;
var hoverColor = multiplier * color;

那么，你通过了

color  = green;

然后在 hover ，发生了什么

hover = hoverColor; 

（即 hoverColor = someMultiplier * color & color is green）