为什么我的 CSS 回退值没有被应用?

Why isn't my CSS fallback value being applied?

我想做的是,每当我删除 :root 中的变量 --mainColor 时,边框颜色将变为黑色,文本将变为红色,但它与颜色的回退值。为什么会这样?

div {
  width: 500px;
  margin: 10px;
  border-color: var(--mainColor, black);
  color: var(--mainColor, red);
  padding: var(--mainPadding, 10px);
  border: solid;
}
<div>Element</div>
<div>Element</div>
<div>Element</div>

因为您使用 border 属性 覆盖 border-color,如果您不指定颜色,默认情况下使用 currentColor

:root {
}

div {
  width: 500px;
  margin: 10px;
  border: solid; /* moved here */
  border-color: var(--mainColor, black);
  color: var(--mainColor, red);
  padding: var(--mainPadding, 10px);
}
<div>Element</div>
<div>Element</div>
<div>Element</div>

或使用 border-style 而不是 border 来防止覆盖。

:root {
}

div {
  width: 500px;
  margin: 10px;
  border-color: var(--mainColor, black);
  color: var(--mainColor, red);
  padding: var(--mainPadding, 10px);
  border-style: solid;
}
<div>Element</div>
<div>Element</div>
<div>Element</div>