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转换为bodyCSS.

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

Answer 1

正如您在标题中正确说明的那样,自定义属性级联.实际上,这就是为什么该模块被称为级联变量的CSS自定义属性.这意味着您的自定义属性--color按每个元素进行求值,就像使用任何其他CSS属性一样.就应用于元素的实际样式而言,您真正拥有的是:

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

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

• 该body元素具有蓝色前景.
• 任何div元素都有绿色前景.
• ID为"alert"的元素具有红色前景.
• 因为您没有--color定义*,所以默认继承.因此,所有其他元素都--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.

另请注意,您拥有的代码来自规范中的示例,其本身描述如下:

如果多次声明自定义属性,则标准级联规则有助于解决该问题.变量始终从同一元素上关联的自定义属性的计算值中提取

我还有一个问题是如果:root转换为bodyCSS.

1. :root 不会转换为CSS中的任何元素,因为CSS与文档语言无关.
2. :root不转换为bodyHTML; 它对应于html.