Question

我有以下CSS

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

以html

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

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

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>

CSS从父级覆盖子级颜色

2 个答案: