在新行上条纹的引导表答案

【问题标题】：Bootstrap table striped on new rows在新行上条纹的引导表
【发布时间】：2016-01-22 02:50:27
【问题描述】：

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

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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 是由服务器生成的）

【讨论】：