如何避免子div继承父div类

时间:2017-12-07 01:06:49

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

我正在尝试制作一个仪表板来代表一些图表和一些数字。我有一个父div,它有一个类。在这个div中,他们是图表和数字的div。现在,如果图表的div从父级继承该类,考虑到图表的大小。然而,显示数字的div应该是更小的尺寸,我已经为它应用了另一个类。但数字的div总是采用父母div风格。他们的方式是孩子div不会采取父母div类。 下面是关于我现在如何获得它以及我是如何到达的图像。

当前: enter image description here

应该如何:

enter image description here

以下是目前的代码。

<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>

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我认为您的列结构存在问题。我可以告诉你你的结构如何 -

<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>