html - 为什么我的 CSS 回退值没有被应用？

Question

我想做的是，每当我删除 :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>

Answer 1

因为您正在使用 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>