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

html5 • • 问答

我想要做的是每当我删除边框颜色中的变量时--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>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>

回答

因为您要覆盖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);
}

或者使用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;
}

以上是为什么没有应用我的CSS回退值？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容