CSS自定义属性如何级联？

比方说，我有以下的CSS：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转化为body在CSS中。

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

来源

2016-02-13 SanJeet Singh

正如您在标题中正确指出的那样，自定义属性级联。实际上，这就是为什么该模块被称为CSS定制属性的级联变量。这意味着您的自定义属性--color按照每个元素进行评估，就像其他任何CSS属性一样。在应用到你的元素的实际样式而言，你真的只能是：

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

的var(--color)值，然后根据如何--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转化为body在CSS上。

:root没有转化为在CSS中的任何元素，因为CSS是文件语言无关。
:root不会转换为HTML中的body;它对应于html。

来源

2016-02-13 03:21:23 BoltClock

让我们先从这一点：

还有一个问题我是，如果:root转化为body在CSS。

答：

的:root选择可以让您针对最高级别的“父” 元素在DOM，或文档树。它在CSS 选择器级别3规范中定义为“结构性伪类”，这意味着它是用于根据其与父级关系和兄弟内容的关系对内容进行样式设置。在绝大多数情况下，您可能会遇到，:root指的是网页中的<html>元素。

Source

那么这个CSS瓦尔：

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

将转化（取决于你的DOM - 如上所述），在这样的事情：

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 */ 
 
}

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

来源

2016-02-13 03:11:11 dippas

请记得链接到您的资料来源。 – BoltClock

是@BoltClock我仍然在编辑我的答案。 – dippas

你不应该等到这样做。人们可以在发布后很快回复*。在您有机会编辑您的答案之前，您的帖子可能已被标记为删除。 – BoltClock

CSS自定义属性如何级联？

回答

相关问题