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按每个元素的形式进行评估，就像使用任何其他CSS属性一样。就应用于元素的实际样式而言，您真正只有：

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

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

body元素有一个蓝色前景。
任何div元素都有绿色前景。
ID为＆＃34; alert＆＃34;有一个红色的前景。
由于您没有--color的{{1}}定义，默认情况下为inherited。因此，所有其他元素都从其父元素继承*：--color继承自body > p，变为蓝色，body继承自#alert > p，变为红色。

如果你确实想用CSS表达级联值，你可以说它转换为以下内容：

#alert

但仅，因为原始CSS包含明确的:root { color: blue; } div { color: green; } #alert { color: red; } * { color: inherit; }定义，可确保每个元素* { color: var(--color); }映射到color。

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

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

我还有一个问题是如果--color转换为CSS中的:root。

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

Answer 2

让我们从这开头：

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

答案：

:root选择器可让您定位最高级别的父母＆＃34; DOM中的元素或文档树。它在CSS中定义选择器Level 3规范作为“结构伪类”，意思是它用于根据与父和子的关系来设置内容的样式兄弟姐妹的内容。在绝大多数情况下，你很可能要遇到，:root引用网页中的<html>元素。

<强> Source

然后这个css vars：

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

将翻译（取决于您的DOM - 如上所述），如下所示：

＆＃13;

html /* this is :root*/ {
  color: blue;
}
div {
  color: green;
}
#alert {
  color: red;
}
* {
  color: inherit; /*this will inherit blue due to HTML is set to blue */
}

＆＃13;

<h1>blue</h1>
<div>green</div>
<span id="alert">red</span>
<span>blue</span>

＆＃13;

CSS自定义属性如何级联？

2 个答案: