假设我有以下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
是否在CSS中翻译为body
。
这里是一个CodePen演示:http://codepen.io/anon/pen/RrvLJQ