我正在使用jQuery DataTables插件(版本1.9.4),并希望更改分页的颜色。
使用CSS,我可以更改背景颜色,但我找不到更改锚标签的字体颜色和字体悬停颜色的方法。我想将以下所有锚标签的字体颜色和悬停字体颜色都更改为白色(#FFFFFF)。
分页代码如下所示:
<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
<a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
<a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
<span>
<a class="paginate_active" tabindex="0">1</a>
<a class="paginate_button" tabindex="0">2</a>
</span>
<a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
<a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>
感谢您对此提供任何帮助,Tim。
答案 0 :(得分:5)
也许您错过了!important
声明?在这种情况下,它确实很重要。
.paging_full_numbers a.paginate_button {
color: #fff !important;
}
.paging_full_numbers a.paginate_active {
color: #fff !important;
}
jsfiddle - &gt; http://jsfiddle.net/CrBkT/
答案 1 :(得分:0)
另一个答案是here:
$.fn.dataTable.ext.classes.sPageButton = 'your class';
答案 2 :(得分:0)
经过一番混乱之后,我才开始工作;
.page-item.active .page-link {
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
}
.page-link {
color: #000 !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
}
.page-link:hover {
color: #fff !important;
background-color: #000 !important;
border-color: #000 !important;
}