在其他变量下使用时，CSS变量未完全继承

时间：2018-11-01 23:00:13

标签： css css-variables

我有以下CSS，我想知道为什么.bar不会改变颜色。 我的意思是，在body内部，我希望--primary-color被覆盖为绿色，如在文本中可以看到的那样。那么.bar为什么不变成绿色？

这是由于--primary-color用于其他变量还是因为CSS规范或CSS顺序导致的？

CSS规范或奇特的情况似乎并非如此。 同样，在查看devtools时，似乎--bar-background应该是绿色的，只是呈现方式不是绿色（在Chrome和Firefox中进行了测试）。

enter image description here 

.bar {
  background: var(--bar-background);
  width: 100%;
  height: 50px;
  margin-bottom: 16px;
}

p {
  color: var(--primary-color);
}

body {
  --primary-color: green;
}

:root {
  --primary-color: blue;
  --bar-background: var(--primary-color);
}
<body>
  <div class="bar">
  </div>

  <p>
  Some text
  </p>
</body>

0 个答案:

没有答案
相关问题
最新问题