我有以下css
.red {
color: red !important;
}
.yellow {
color: yellow
}
在html中
<div class="red">
red
<span class="yellow">override this</span>
</div>
如何从父级重写子级颜色。我不能使用inherit。我有条件当红色将显示为黄色否则。请帮帮忙
以下是我的建议
这是我的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
}
正如你所看到的，黄色被红色覆盖了
这个答案的优点是关于不使用！重要的属性。
您可以简单地使用CSS parent-child语法来实现，也可以将父项组合在一起，使其具有相同的CSS属性（在我们的示例中），如下所示:
null
.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>