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

Question

我想要做的是每当我删除边框颜色中的变量时--mainColor，它:root都会变为黑色，文本变为红色，但它将与颜色的回退值相同。为什么会发生这种情况？

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-colorusingborder属性，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>