css - 覆盖数据表 css

Question

我将数据表与它们的 native 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 的第一次出现出现在 much more详细规则(类似于 table.dataTable.stripe tbody tr.odd)，因此为该规则分配了更高的优先级。

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

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