Question

我正在创建Splunk仪表板。对于我的表，我有一个名为application.css的样式表，它根据需要交替显示表行的颜色。不幸的是，当使用图表时，highcharts-tooltip基本上是一个表格，它用行的交替颜色渲染。因此，值行是一个非常浅绿色的背景，带有白色文本。无法阅读文字。

看起来highcharts-tooltip是由java脚本生成的。

这是工具提示在页面中的呈现方式：

<table class="highcharts-tooltip">
<tbody>
  <tr>
   <td style="text-align: left; color: rgb(204, 204, 204); max-width: 120.34px;">    WebPage:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">\\x94/bla/bla/Browse.html\\x94</td>
  </tr>
  <tr>
   <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">12</td>
  </tr>
  <tr>
   <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits%:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">24.49%</td>
  </tr>
</tbody>
</table>

第二个tr是无法读取的tr。我的问题是，有没有办法在我的application.css文件中使用css覆盖工具提示中的交替行颜色，这样行不是rgb（255,255,255）而是rgb（00,00,00）？

Answer 1

使用!important可能是覆盖内联样式的唯一方法。请记住，即使在其他图表的工具提示中，此解决方案也会更改td的颜色。使用#[CHART CONTAINER ID]添加选择器以避免这种情况。

的CSS：

table.highcharts-tooltip tbody tr td:nth-child(2){
  color: #000000 !important;
}

nth-child browser compatibility

在highcharts-tooltip中覆盖表格单元格背景颜色

1 个答案: