CSS 自定义属性如何级联？答案

【问题标题】：How do CSS custom properties cascade?CSS 自定义属性如何级联？
【发布时间】：2016-05-24 08:49:24
【问题描述】：

假设我有以下 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

【问题讨论】：

标签： html css css-variables

【解决方案1】：

正如您在标题中正确说明的那样，自定义属性级联。事实上，这就是为什么该模块被称为 CSS Custom Properties for Cascading Variables。这意味着您的自定义属性 --color 按元素按原样进行评估，就像任何其他 CSS 属性一样。就应用于元素的实际样式而言，您真正拥有的是：

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

然后根据--color 属性的级联方式为每个元素评估var(--color) 值。于是得出这样的结论：

body 元素的前景为蓝色。
任何div 元素都有一个绿色的前景。
ID 为“alert”的元素具有红色前景。
因为您没有--color 的* 定义，所以默认为inherited。因此，所有其他元素都从其父元素继承 --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，其本身描述如下：

如果自定义属性被多次声明，标准级联规则可以帮助解决它。变量总是从同一元素上关联自定义属性的计算值中提取

我还有一个问题是 :root 在 CSS 中是否转换为 body。

:root 不会转换为 CSS 中的任何元素，因为 CSS 与文档语言无关。
:root 不会在 HTML 中转换为 body；它对应于html。

【讨论】：