在CSS中可以从另一个值设置一个值吗?

CSS变量于2015年引入，并在2016年获得了急需的浏览器支持。我推荐MDN文档:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

:root {
--main-bg-color: #58ae12;
}

然后在#receiver中使用set变量:

#receiver {
background-color: var(--main-bg-color);
}

希望这能帮助@octa_yt00

在纯CSS中这是不可能的。

这里有3个可行的解决方案

// With Javacript
document.body.querySelector('#inherit-js').style.background = getComputedStyle(document.body.querySelector('#parent-js')).background
// With Javacript hack 
let color = '#123456'; //Set or Get color from anywhere you need
document.head.insertAdjacentHTML('beforeend', `<style>:root{--color-wanted-hack:${color};}</style>`); //Append style before DOM rendering then css var --color-wanted-hack is set

/* With CSS variables */
:root {
--color-wanted: blue;
}
#parent-var {
background: var(--color-wanted)
}
#inherit-var {
color: white;
background: var(--color-wanted)
}

/* With Javascript */
#parent-js {
background: red;
}

/* With Javascript hack */
#parent-js-hack {
background: var(--color-wanted-hack);
}
#inherit-js-hack {
color: white;
background: var(--color-wanted-hack)
}

<p id="parent-var">Hello world !</p>
<p id="inherit-var">Hello again !</p>
<p id="parent-js">Hello world !</p>
<p id="inherit-js">Hello again !</p>
<p id="parent-js-hack">Hello world !</p>
<p id="inherit-js-hack">Hello again !</p>

您有3个解决方案

• currentColor
<
• 根颜色/gh>透明

currentColor

<div id="origin">
<div id="reciever">
</div>
</div>

#origin {
background-color: #58ae12;
color: #58ae12;
}
#reciever {
background-color: currentColor;
}

:根颜色

:root {
--origin-color: #58ae12;
}
#origin {
background-color: var(--origin-color);
}
#reciever {
background-color: var(--origin-color);
}

<div id="origin">
<div id="reciever">
</div>
</div>

#origin {
background-color: #58ae12;
}
#reciever {
background-color: transparent;
width: 100%;
height: 100%;
}

如果你使用Jquery，你可以改变你想要的。

var old=$("#origin").css("background-color");

$("#reciever").css("background-color",old);

我不认为有任何方法可以直接通过CSS从另一个ID获取背景色。但是，您可以为此使用变量。

:root {
--bgcolor: #58ae12;
}

#origin {
background-color:var(--bgcolor);
}
#reciever {
background-color: var(--bgcolor);
}