类之间的 CSS "sharing"样式

Question

我想知道这是否可行。我想在 CSS 文件中定义一个属性，例如 body 的背景颜色，然后指定一个具有相同颜色但从 body 继承的输入按钮...像这样...

body {
    background-color: #0000AA;
    font-size: 12px;
    color: #FFFFFF;
}

input[type="button"] {
    background-color: body.background-color;
}

因此，当我更改正文的背景颜色时，输入按钮也会发生变化。可能吗？

谢谢。

Answer 1

不完全是CSS Custom Properties (也称为 CSS 变量)可以实现类似的功能。

现代浏览器(包括 Edge)的支持非常好，但没有 IE。

body {
  --main-bg-color: brown;
  background-color: var(--main-bg-color);
  font-size: 12px;
  color: #FFFFFF;
}

input[type="button"] {
  background-color:var(--main-bg-color);
  color: white;
}

<input type="button" value="Button" />