类从id中获取颜色

Question

我有几个div在同一个类中，并且有不同的id。我需要改变每个div的颜色，我不知道如何做到

我想要这种

HTML代码：

<div class="thing" id="one"></div>
<div class="thing" id="two"></div>
<div class="thing" id="three"></div>

CSS代码：

#one{
color:green;
}
#two{
color:red;
}
.thing{
background-color: get color from id;
}

Answer 1

color-更改文本颜色

背景色-更改元素的背景

将所有"颜色"更改为"背景色"，看看这是否是你想要做的。

Answer 2

您可以使用变量，而不是直接使用颜色。

#one {
--thing-color: green;
}
#two {
--thing-color: red;
}
.thing {
color: var(--thing-color);
background-color: var(--thing-color);
}

Answer 3

.things{border-size = 10px} //for all element in class .things

#one{border-color = #blue} //for specific element id one

id元素默认继承

Answer 4

可以为每种颜色的背景颜色设置内联样式吗？

<div class="thing" id="one" style="background: green;"></div>
<div class="thing" id="two" style="background: red;"></div>
<div class="thing" id="three" style="background: blue;"></div>

当我测试它时，它使用background: red;和background-color: red;工作

Answer 5

您的错误是在ID中使用"color"而不是"background color"。这会覆盖类的背景色(如果有的话(。

#one{
background-color: green;
}
#two{
background-color: red;
}
#three{
background-color: blue;
}

应该做到这一点。

Answer 6

使用CSS伪元素作为第一个子、最后一个子、第n个子(n(

.thing:first-child{
background-color: green;
}
.thing:nth-child(2){
background-color: red;
}
.thing:last-child{
background-color: blue;
}