gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 23:26:07 31 4
gpt4 key购买 nike

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

enter image description here

最佳答案

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

关于html - 为什么我的 CSS 回退值没有被应用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67230453/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com