Cs覆盖父颜色中的子颜色

Question

我有以下css

.red {
color: red !important;
}
.yellow {
color: yellow;
}

在html 中

<div class="red">
red
<span class="yellow">override this</span>
</div>

如何从父项覆盖子项颜色？我不能使用inherit。我有一个条件，红色显示为黄色。请帮帮我。

Answer 1

以下是我对的建议

这是我的html

<div class="red">
red
<span class="yellow">override this</span>
</div>
<span class="yellow">this will be yellow</span>

<span class="red">this will be red</span>

这是我的css

.red .yellow {
color: red !important;
}
.red  {
color: red !important;
}
.yellow {
color: yellow
}

正如你所看到的，黄色被红色覆盖

Answer 2

此答案的优点在于不使用!important属性。

您可以简单地使用CSS parent-child语法，也可以组合父亲使其具有相同的CSS属性(在我们的例子中(，如下所示：

.red, .red > .yellow {
color: red;
}
.yellow {
color: yellow;
}

<div class="red">
red
<span class="yellow">override this</span>
</div>
<p>Should be <b class="red">red</b></p>
<p>Should be <b class="yellow">yellow</b></p>