Question

我正在使用DataTables库来构建表。我使用Bootstrap来设置这些表的样式。 DataTables的一个功能是用于扩展细节/添加子行的API。（参见https://datatables.net/examples/api/row_details.html）它通过在当前行下插入一个新tr来实现。问题是这会干扰Bootstrap选择器以应用行着色：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

选择器现在在其奇数/偶数选择器中选择新的“详细信息”行。我不想要这个。

有关如何编写选择器以跳过这些详细信息行的任何想法？

e.g.unexpanded

<tr role="row" class="odd">...</tr>

然后当我展开/显示细节时：

<tr role="row" class="odd shown">...</tr>
<tr>...</tr>

Answer 1

我认为你和这个家伙的情况相同Select odd even child excluding the hidden child

基本上，你想要从偶数/奇数计数中排除一个元素，但它目前是不可能的，因为偶数/奇数只搜索dom树并对孩子进行计数，是＆＃34;不是＆＃34;堆栈＆＃34;如其中一个答案所述

我相信这是CSS4的nth-match选择器将要解决的确切案例，然后您可以用这样的内容覆盖这些规则：

.table-striped.has-plugin > tbody > tr:not[row]:nth-match(odd) > td,
.table-striped.has-plugin > tbody > tr:not[row]:nth-match(odd) > th {
    background-color: #f9f9f9;
}

但是在我们让CSS4工作之前，我认为我们不得不编写javascript来获取这些匹配，迭代它们，然后为它们绘制或添加类，或者将这些类添加到服务器中的行（但是只有当您的HTML由服务器生成时才会出现

在新行上条纹的引导表

1 个答案: