如何避免子div继承父div类答案

【问题标题】：How to avoid child div inheriting parent div class如何避免子div继承父div类
【发布时间】：2023-04-03 11:49:02
【问题描述】：

我正在尝试制作一个仪表板来表示一些图表和一些数字。我有一个父 div，它有一个类。在这个 div 里面，它们是图表和数字的 div。现在，如果图表的 div 继承了父类的类，那么考虑到图表的大小就可以了。然而，显示数字的 div 应该更小，我已经为它应用了另一个类。但是数字的 div 总是采用父母的 div 样式。他们是孩子 div 不会参加父母 div 课程的一种方式。下面是关于我现在如何获得它以及我试图如何获得它的图片。

目前：

应该如何：

下面是当前的代码。

<div class="col-md-6 " style=" padding-bottom: 15px;" ng-repeat="obj in tab" ng-include="'chartstemplate'">


  <div class="col-xs-3">
    <div ng-if="charts_type =='Number'" class="block" style=" padding-bottom: 30px;font-size: 45px;font-weight: 700; margin-right: -70px;">
      <!-- <div  ng-if="charts_type =='Number'" style=" height: 70px;font-size: 45px;margin-top: 30px;font-weight: 700;margin-left:180px; width: 16.66667% !important;">-->
      <dash-board ng-if="obj.chart_data" chart-data="obj.chart_data" />
    </div>
  </div>

  <div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
    <bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
  </div>
  <div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
    <bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
  </div>
  <div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
    <bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
  </div>

</div>

【问题讨论】：

请考虑在 CSS Grid 中执行此操作 - 这是为这种确切类型的布局设计的原生 CSS 规范。

标签： html css angularjs twitter-bootstrap material-design

【解决方案1】：

要么专门覆盖继承的属性，要么查看 :not() 伪选择器

【讨论】：

如何为带有引导类的 div 执行 :not()

【解决方案2】：

我认为您的列结构存在问题。我可以向您展示您的结构如何 -

<div class="col-md-6">
 *charts*
</div>
<div class="col-md-6">
    <div class="row">
        <div class="col-md-6">
            *number*
        </div>
        <div class="col-md-6">
            *number*
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            *number*
        </div>
        <div class="col-md-6">
            *number*
        </div>
    </div>
</div>

【讨论】：