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

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是不能读的。我的问题是，有没有办法在我的 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