解释此 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.

的内容

Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value. This can create cyclic dependencies where a custom property uses a var() referring to itself, or two or more custom properties each attempt to refer to each other.

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

: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 = hoverColor;

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

解释此 CSS 自定义属性行为

Explain this CSS custom properties behavior

css

css-variables