相关疑难解决方法(0)

假设我有以下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转换为bodyCSS. …

#elem {
  -myCustom: 99;
}

要么

#elem {
  --myCustom: 99;
}

我在网上的例子中看到过以上两种情况.两者有什么区别？

尝试在JavaScript中访问自定义属性返回null ..

#elem {
-myCustom: 99;
}

<div id="elem">some text</div>

elem = document.getElementById("elem");
style= window.getComputedStyle(elem);
value = style.getPropertyValue('-myCustom');
alert(value);

在我在网上阅读的所有资料中,似乎CSS自定义属性和CSS变量是相同的.但是,在Mozilla Developer Network文档的"CSS变量的继承"部分的示例结尾处,有一个令人困惑的声明:

请记住,这些是自定义属性,而不是实际的CSS变量.该值在需要时计算,不存储以用于其他规则.例如,您不能为元素设置属性,并期望在兄弟的后代规则中检索它.该属性仅为匹配选择器及其后代设置,就像任何普通的CSS一样.

这让我觉得这两个概念不是同义词.

自定义属性和变量之间有什么区别？