CSS 選擇器根據類別篩選器尋找實體子集

Question

我有一個表，其中包含一系列表示的行，在該組表中，有些行具有「可點擊」類別。我試圖做的是將樣式應用於具有“可點擊”類別的每個奇數行。我嘗試了各種選擇器，但它似乎只將樣式應用於可單擊的奇數行，這些行在應用於所有表行時是奇數，而不僅僅是那些具有“可單擊”類的行。我想我需要選擇器來尋找具有“clickable”類別的行子集，然後為奇數子項迭代這些行。

如果第 1、4、5、7 和 8 行可單擊，那麼我希望第 4 行和第 7 行被視為此處的奇數行。但是，它似乎會查看1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 並在尋找具有可點擊的奇數行時(使用c 作為參考）僅選擇4、8，因為它們位於整個行集的奇數位置。

我嘗試了很多選擇器，但沒有運氣。我希望這是一種可能的情況，並且有人可以幫助我提供一些回饋，或者如果可能的話提供解決方案。

td {
  border-bottom: 1px solid #cdcdcd;
  width: 100px;
}

.clickable {
  font-weight: 600;
  font-size: 16px;
}

.clickable:nth-child(odd) {
  background-color: lightcoral;
}

<table>
  <tr class="table-row clickable">
    <td>Dean</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Fred</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Gina</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Alex</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Eli</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Emma</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>John</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sophie</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sarah</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>

</table>

Answer 1

這就是您要找的：

tr:nth-child(even of .clickable) {
    background-color: lightcoral;
}

答案來源來自此處

#或使用java腳本/jquery來獲得廣泛的瀏覽器支援：

$('tr.clickable').each(function(index, value) {
  if(index % 2 != 0)
  $(value).addClass('custom-bg');
});

td {
  border-bottom: 1px solid #cdcdcd;
  width: 100px;
}

.clickable {
  font-weight: 600;
  font-size: 16px;
}

.clickable.custom-bg {
  background-color: lightcoral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="table-row clickable">
    <td>Dean</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Fred</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sam</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row">
    <td>Gina</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sam</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Alex</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Eli</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Emma</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row clickable">
    <td>John</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>
  <tr class="table-row">
    <td>Sophie</td>
    <td>Canada</td>
    <td>False</Td>
  </tr>
  <tr class="table-row clickable">
    <td>Sarah</td>
    <td>Canada</td>
    <td>True</Td>
  </tr>

</table>