CSS自定义属性如何级联？ [英] How do CSS custom properties cascade?

问题描述

假设我有以下CSS：

 ：root {--color：blue; } 
 div {--color：green; } 
 #alert {--color：red; } 
 * {color：var（ -  color）; } 
  

我的标记是：

 < p>我从根元素继承了蓝色！< / p> 
< div>我直接在我身上设置了绿色！< / div> 
< div id =alert> 
虽然我直接在我身上红了！ 
< p>由于继承，我也是红色的！< / p> 
< / div> 
  

我的问题是上面的CSS转换为：

  body {
颜色：蓝色; 
} 
 div {
颜色：绿色; 
} 
 #alert {
颜色：红色; 
} 
  

或是否有额外的

  * {
颜色：红色; 
} 
  

没有变量，通用选择器在所有元素上应用相同的CSS。这个改变和样式依赖于元素吗？

我还有一个问题是如果：root 转化为 body in CSS。

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

解决方案

div>

正如您在标题中正确指出的那样，自定义属性 cascade 。实际上，这就是为什么该模块被称为 CSS级联变量的自定义属性的原因。这意味着您的自定义属性 - color 按每个元素的原样计算，就像其他任何CSS属性一样。根据应用到元素的实际样式，您真正拥有的仅仅是：

  * {
颜色：var（ -  color）; 
 
  

var（ - color） - color 属性级联的方式评估每个元素的c $ c>值。所以它是这样的：

• body 元素有一个蓝色的前景。


• 任何 div 元素都有一个前景绿色。


• ID为alert的元素具有一个红色的前景。


• 因为 * - color c $ c>，默认情况下它的继承。因此，所有其他元素都从它们的父元素继承 - color ： body> p 继承自 body ，变为蓝色，并且 #alert>



p>如果你真的想用CSS表达级联值，你可以说它转化为以下内容：

 ：root {
 color：blue; 
} 
 div {
颜色：绿色; 
} 
 #alert {
颜色：红色; 
} 
 * {
 color：inherit; 
 
 
 
 
 
 $ b 
但是 only 是因为原始CSS包含显式 * {color：var（ -  color）; } 定义确保每个元素的颜色映射到  -  color 。
 
 
 
还请注意，您的代码来自
 
 
如果自定义属性是多次声明，标准级联规则有助于解决它。变量总是从相同元素上的相关定制属性的计算值中抽取出来。
 
 
 
 
 
 
 
 
 
 
还有一个问题是，如果：root 转换为CSS中的 body  p> 
 
 
 
 
 
 
 ：root 不会转换为任何元素在CSS中，因为CSS是与文档语言无关的。
 
 
 ：root 不会转换为 / code>在HTML中;它对应于 html 。
 
 
 
Let's say I have following CSS :
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
and my markup is :
<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>
My question is Does the CSS above translate to :
body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}
or is there an additional
* {
  color: red;
}
Without variables the universal selector applies the same CSS on all elements. Does this change and the styling becomes dependent on elements?


One more question I have is if :root translates to body in CSS.

Here is a CodePen demo : http://codepen.io/anon/pen/RrvLJQ
解决方案
As you've correctly stated in your title, custom properties cascade. In fact, this is why the module is called CSS Custom Properties for Cascading Variables. That means your custom property --color is evaluated as-is per element, just as with any other CSS property. In terms of the actual styles that are applied to your elements, what you really only have is:
* {
  color: var(--color);
}
The var(--color) value is then evaluated for each element based on how the --color property cascades. So it follows that:


The body element has a blue foreground.
Any div elements have a green foreground.
The element whose ID is "alert" has a red foreground.
Because you don't have a --color definition for *, it's inherited by default. Therefore all other elements inherit --color from their parent element: body > p inherits from body, becoming blue, and #alert > p inherits from #alert, becoming red.


If you really do want to express the cascaded values in terms of CSS, you could say that it translates to the following:
:root {
  color: blue;
}
div {
  color: green;
}
#alert {
  color: red;
}
* {
  color: inherit;
}
But only because the original CSS contains an explicit * { color: var(--color); } definition which ensures that every element's color maps to --color.

Note also that the code that you have comes from an example within the spec, which itself is described as follows:

  
If a custom property is declared multiple times, the standard cascade rules help resolve it. Variables always draw from the computed value of the associated custom property on the same element





  
One more question I have is if :root translates to body in CSS.



:root doesn't translate to any element in CSS, because CSS is document language-agnostic.
:root doesn't translate to body in HTML; it corresponds to html.


                        
这篇关于CSS自定义属性如何级联？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！