覆盖datatables css

Question

我使用datatables与他们的本地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第一次出现将出现在更detaild规则（类似于​​），因此更高的优先级分配给该规则。

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

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