6

假设我有以下 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。这是否会发生变化并且样式变得依赖于元素？

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

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

4

1 回答 1

7

正如您在标题中正确说明的那样，自定义属性cascade。事实上，这就是模块被称为CSS Custom Properties for Cascading Variables的原因。这意味着您的自定义属性--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.

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

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

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

  1. :root不会转换为 CSS 中的任何元素，因为 CSS 与文档语言无关。
  2. :root不翻译成bodyHTML；它对应于html。
于 2016-02-13T03:21:23.663 回答