css - Bootstrap 表在新行上 strip 化

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

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

关于如何编写选择器以跳过这些详细信息行有什么想法吗？

例如未展开

<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 树并计算子项，如其中一个答案中所述，“不堆叠”

我相信这正是 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 由服务器生成时)