我正在创建 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: </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: </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%: </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)?
最佳答案
使用!important
可能是覆盖内联样式的唯一方法。请记住,即使在其他图表的工具提示中,此解决方案也会改变 td 的颜色。在选择器前面添加 #[CHART CONTAINER ID]
以避免这种情况。
CSS:
table.highcharts-tooltip tbody tr td:nth-child(2){
color: #000000 !important;
}
关于css - 覆盖 highcharts-tooltip 中的表格单元格背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37708532/