Question

我的网页上有多个图表，我想将一个特定图表的背景颜色更改为白色，为此我使用了以下css样式。

svg g:first-of-type rect {
  fill-opacity: 0;
}
svg g:first-of-type path {
  stroke: #e6e6e6;
}
svg g:first-of-type rect:not(:last-child) {
  fill: #ffffff;
}

使用上面的代码，它使我的应用程序中的所有图表颜色变为白色，我如何将其应用于特定图表。我尝试在svg元素前使用div id值，同时声明样式但是不工作..

Answer 1

将id用于父div。希望这会有所帮助。

＆＃13;

<style>
/*   want to make the grey color shown in chart2 to white*/
  /*  svg g:first-of-type rect {
        fill-opacity: 0;
    }
    svg g:first-of-type path {
        stroke: #e6e6e6;
    }
    svg g:first-of-type rect:not(:last-child) {
        fill: #ffffff;
    }*/
    #chartTwo{
      background-color:Red;
    }
    
</style> 

</head>

<body>
  <div ng-controller="myController">
    <div id="chartOne" google-chart chart="myChart"></div>
  </div>
  
  <br>
   <div ng-controller="myController2"  id="chartTwo">
    <div  google-chart chart="myChart"></div>
  </div>
  
</body>

＆＃13;

Answer 2

正如你的傻瓜说你在两个图表上使用不同的ids那么为什么不使用那个特定的图表id来应用css，如

backgroundColor到none或transparent无法在svg中使用，因为颜色来自svg fill属性。

#chartTwo svg g:first-of-type rect {
  fill-opacity: 0;
}

#chartTwo svg g:first-of-type path {
  stroke: #e6e6e6;
}

#chartTwo svg g:first-of-type rect:not(:last-child) {
  fill: #ffffff;
}

<强> Updated Plunker

Answer 3

在CSS中试用

background-color: none !important;

background-color: transparent !important;

使用!important它会起作用..

Answer 4

import re
with open(path, 'r') as f:
    result = re.sub(r'(^ | $)', '', re.sub(r'\w+', ' ', f.read()))
    print(result)

CSS中的

<body>
  <div ng-controller="myController">
    <div id="chartOne" google-chart chart="myChart"></div>
  </div>

  <br>
   <div ng-controller="myController2" class="scnd">
    <div id="chartTwo" google-chart chart="myChart"></div>
  </div>

</body>

你写的样式不正确

.scnd
{
    /*Your style here*/
}

使用ID设置背景颜色

4 个答案: