jQuery / DataTables：如何更改分页颜色

Question

我正在使用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。

- user2571510

---

在浏览器控制台中检查每个元素，可以看到应用的所有规则并进行实时编辑。找到有效的内容并复制到文件中。 - charlietfl

谢谢 - 我该怎么做？ - user2571510

Answer 1

也许你忘记了使用!important声明？在这种情况下，它确实很重要。

.paging_full_numbers a.paginate_button {
    color: #fff !important;
}
.paging_full_numbers a.paginate_active {
    color: #fff !important;
}

jsfiddle -> http://jsfiddle.net/CrBkT/

- davidkonrad

---

太棒了 - 我从来没有想过那个方法，而且它还有效。非常感谢！ :) - user2571510

Answer 2

经过一些摸索，我得到了以下工作结果:

    .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; 
    }

- Scott M

Answer 3

另一个答案在这里：

$.fn.dataTable.ext.classes.sPageButton = 'your class';

- Mohsen