覆盖数据表 css

Question

我正在使用带有原生 css 的数据表，这可以节省大量时间。我想要做的是用我自己的 css 覆盖某些元素，但保留数据表提供的所有内容。

这是我尝试过但不起作用的方法，我确定我在这里缺少一些基本的东西，所以请随时向我指出一个 turorial 或其他东西，但我已经搜索了数据表论坛和谷歌几个小时而没有成功。

//Links to DataTables css and js 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.11.4/jqc-1.12.4/dt-1.10.13/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/ju-1.11.4/jqc-1.12.4/dt-1.10.13/fh-3.1.2/datatables.min.js"></script>

//This is my own css class
table.mycss tr.odd { background-color: red; }
table.mycss tr.even { background-color: green; }

//This is how the styles are applied to the table
echo "<table id='hof-table' class='dataTable display cell-border mycss' cellspacing='0' width='100%'>";

Answer 1

问题很可能是由声明规则的详细程度不同引起的。

您定义了table.mycss tr.odd，但是如果您在远程数据表样式表上进行搜索，您可以看到tr.odd 的第一次出现出现在更详细的规则中（类似于table.dataTable.stripe tbody tr.odd），因此为其分配了更高的优先级规则。

尝试使您的规则更具体，或者，如果太难，请将!important 子句添加到您的规则中。但这不是推荐的做法，因为这会使以后的编辑更加复杂，特别是如果由其他人完成。

你可以看看here，它描述了一种计算css规则特异性的非常简单的方法。