Css覆盖来自父级的子颜色[重复]答案

【问题标题】：Css override child color from parent [duplicate]Css覆盖来自父级的子颜色[重复]
【发布时间】：2020-12-13 05:20:09
【问题描述】：

我有以下 css

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

在html中

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

如何覆盖父级的子级颜色？我不能使用继承。我的条件是红色显示为黄色。请帮帮我。

【问题讨论】：

使用选择器.red .yellow并将其设置为您喜欢的值
我无法更新孩子。我可以通过仅更新父级来更改 css 吗？
你试过了吗？ stackoverflow.com/questions/21297085/…
为什么不能更新css？不幸的是，除非您想编写一些 JavaScript，否则这是您唯一的选择。我不会推荐，因为它会对性能产生不良影响
选择器工作了，谢谢。我可以更新 css 但不能更新孩子。我已经可以使用 react

标签： html css

【解决方案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
 }

如你所见，黄色被红色覆盖

【讨论】：

【解决方案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>

【讨论】：