CSS 自定义属性如何级联？

Question

假设我有以下 CSS :

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

我的标记是：

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

我的问题是上面的 CSS 是否转换为：

body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}

或者是否有额外的

* {
  color: red;
}

没有变量，通用选择器对所有元素应用相同的 CSS。这会改变并且样式变得取决于元素吗？

我还有一个问题，如果 :root 在 CSS 中转换为 body。

这是一个 CodePen 演示：http://codepen.io/anon/pen/RrvLJQ

Answer 1

正如您在标题中正确指出的那样，自定义属性级联。事实上，这就是为什么该模块被称为 CSS 级联变量自定义属性 的原因。这意味着您的自定义属性 --color 每个元素都会被评估 as-is，就像任何其他 CSS 属性一样。就应用于您的元素的实际样式而言，您真正拥有的是：

* {
  color: var(--color);
}

然后根据 --color 属性级联的方式为每个元素评估 var(--color) 值。所以它遵循：

body 元素有蓝色前景。
任何 div 个元素都有绿色前景。
ID为"alert"的元素有红色前景。
因为您没有 * 的 --color 定义，所以默认为 inherited。因此所有其他元素从它们的 parent 元素继承 --color：body > p 从 body 继承，变成蓝色，而 #alert > p 从 #alert 继承，变成红色.

如果您真的想用 CSS 表示级联值，您可以将其翻译成以下内容：

:root {
  color: blue;
}
div {
  color: green;
}
#alert {
  color: red;
}
* {
  color: inherit;
}

但仅因为原始 CSS 包含明确的 * { color: var(--color); } 定义，确保每个元素的 color 映射到 --color.

另请注意，您的代码来自 an example within the spec，其本身描述如下：

If a custom property is declared multiple times, the standard cascade rules help resolve it. Variables always draw from the computed value of the associated custom property on the same element

One more question I have is if :root translates to body in CSS.

:root 不会转换为 CSS 中的任何元素，因为 CSS 是文档 language-agnostic.
:root 不会在 HTML 中转换为 body；它对应于 html.

CSS 自定义属性如何级联？

How do CSS custom properties cascade?

html

css

css-variables