如何在子标签中覆盖父标签继承的css属性答案

【问题标题】：How to overwrite the css properties inherited by parent tag in child tag如何在子标签中覆盖父标签继承的css属性
【发布时间】：2017-11-24 20:41:37
【问题描述】：

我有一个引导元素卡，我已将该卡体分成 3 个部分（div）。现在在最后一个 div 中，我希望该区域被背景色覆盖。但我无法做到这一点，因为 card-body 类具有内置的填充功能：1.25rem; 代码如下。

<div class="card col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12">
      <div class="card-body  col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12" style="display:flex">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8" style="color:#f93d3d;"><h5>This is some text within a card body.</h5> </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">&euro;7890 </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" style="background-color:#3c3c3c"></div>

      </div>

    </div>

【问题讨论】：

您的最后一个 div 为空，因此无法设置背景颜色

标签： html css bootstrap-4

【解决方案1】：

<div class="card col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12">
      <div class="card-body  col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12" style="display:flex">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8" style="color:#f93d3d;"><h5>This is some text within a card body.</h5> </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">&euro;7890 </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2" style="background-color:#3c3c3c;color:#fff;">test</div>

      </div>

    </div>

看看这个

【讨论】：