html - 或 CSS 类以选择器结尾的方法？

Question

我有以下 CSS 类选择器，它将选择所有 <td>偶的 child <tr> <tbody> 的 children 其中 <tr>属于任何以 2 结尾的类:

.table-striped > tbody >  tr:nth-child(2n)[class$='2'] > td{
           background-color: #FFF7C7;
}

我想做的是选择所有 <td>偶的 child <tr> <tbody> 的 children 其中 <tr>属于任何以偶数结尾但不包括 10 的类。我希望我能做一些事情来达到以下效果:

.table-striped > tbody >  tr:nth-child(2n)[class$=('2' || '4' || '6' || '8')] > td{
           background-color: #FFF7C7;
}

所以我的问题是，如何在以选择器结尾的类中实现 OR 案例？

这里有一个 HTML 示例供引用(我想选择前两行的所有 <td>。):

<tbody>
  <tr class="ctgry_2"><td>Data</td><td>Data</td><td>Data</td></tr>
  <tr class="ctgry_6"><td>Data</td><td>Data</td><td>Data</td></tr>
  <tr class="ctgry_3"><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>

Answer 1

对于 CSS，您需要使用 , 来分隔每个单独的选择器:

.table-striped > tbody >  tr:nth-child(2n)[class$='0'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='2'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='4'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='6'] > td,
.table-striped > tbody >  tr:nth-child(2n)[class$='8'] > td

这非常冗长，您应该会立即看出您可能选择了一个糟糕的选择器，您可以在适当的元素上使用类。