更改 dataTables 中的链接样式答案

【问题标题】：Change link styling in dataTables更改 dataTables 中的链接样式
【发布时间】：2016-07-25 03:41:17
【问题描述】：

我发现以下 CSS 类句柄突出显示 dataTables 中的活动行。

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #337ab7;

}

产生这样的结果：

最左边的列是一个链接，可以看出这对我的链接样式有什么影响。当前链接是默认的蓝色，我想将其更改为白色。是否可以直接在此类中设置我的链接样式？

Bob Rhodes 给出了正确的答案。

.table > tbody > tr.active > td > a {color: white}

再次感谢。

【问题讨论】：

在标准 css 中你不能嵌套规则。但是，如果您需要根据所选内容为您的 a 标签设置特定样式，您可以使用 tr.active a {color: #666;} 例如。
很抱歉，我不太明白这会如何影响您的链接样式，因为您还没有告诉我们您希望链接的样式。那么，你能告诉我们吗？但是，是的，这是可能的。你想做什么？
BobRodes，我编辑了原始提示，说我想在突出显示时将链接设置为白色。
我正在阅读您的原始示例，因为顶部的蓝线是标题！难怪我一头雾水。哈哈

标签： jquery css datatables

【解决方案1】：

您需要创建一个具有更大或相同特异性的选择器（如果您在页面中引用 datatables.css 下方的 CSS 文件，则相同）。您可以使用的一个不错的工具是 CSS specificity calculator。

我不确定您为什么要将链接从蓝色更改为白色，因为它的背景非常浅，很难看到。但这会做到这一点：

.table > tbody > tr.active > td > a {color: white}

现在，您可以不做的一件事是选择一个td 元素，因为它包含一个链接。 CSS 中无法根据其内容选择容器。您必须向容器中添加一个类并以这种方式选择它。

【讨论】：

我想在 tr 处于活动状态时将链接更改为白色，因为这会将深蓝色背景置于后面。这段代码是正确的。我将它添加到不正确的现有 datatables.css 中。我将它添加到另一个 css 文档中，该文档在 datatables.css 之后加载。
@BillTudor 感谢您的解释。现在这完全有道理。顺便说一句，如果您想要链接上的惯用下划线，请将text-decoration: underline; 添加到您的样式中。

【解决方案2】：

使用此代码：

.table > tbody > tr.active a{color: #fff;}

【讨论】：

这不会只选择活动行，我认为这是 OP 想要的。
为了向未来的读者澄清，发帖人编辑了代码以包含.active。它现在将只选择活动行。