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

- SanJeet Singh

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。

另请注意，您拥有的代码来自规范中的示例，该规范本身被描述如下：

如果自定义属性被声明多次，则标准级联规则有助于解决它。变量始终从同一元素上相关自定义属性的计算值绘制。

---

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

1. :root在CSS中不对应任何元素，因为CSS是文档语言无关的。
2. :root在HTML中不对应body，而对应的是html。

- BoltClock