Pemilih CSS mencari subset entiti berdasarkan penapis kelas

Question

Saya mempunyai jadual yang mengandungi set baris yang diwakili, dan dalam set jadual itu, beberapa baris mempunyai kategori "boleh diklik". Apa yang saya cuba lakukan ialah menggunakan gaya pada setiap baris ganjil yang mempunyai kategori "boleh diklik". Saya telah mencuba pelbagai pemilih, tetapi ia nampaknya hanya menggunakan gaya pada baris ganjil yang boleh diklik, yang ganjil apabila digunakan pada semua baris jadual, bukan sahaja yang mempunyai kelas "boleh diklik". Saya rasa saya memerlukan pemilih untuk mencari subset baris yang mempunyai kelas "boleh diklik" dan kemudian lelaran ke atas baris tersebut untuk bilangan kanak-kanak yang ganjil.

Jika baris 1, 4, 5, 7 dan 8 boleh diklik, maka saya mahu baris 4 dan 7 dianggap sebagai baris ganjil di sini. Walau bagaimanapun, nampaknya melihat pada 1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 dan apabila mencari baris ganjil dengan boleh diklik ( Menggunakan c sebagai rujukan) Hanya 4, 8 dipilih kerana mereka berada pada kedudukan ganjil dalam keseluruhan set baris.

Saya mencuba banyak pemilih tetapi tidak berjaya. Saya berharap ini adalah senario yang mungkin dan seseorang boleh membantu saya dengan beberapa maklum balas atau penyelesaian jika boleh.

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

Ini yang anda cari:

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

Sumber jawapan datang dari sini

Atau gunakan skrip java/jquery untuk sokongan pelayar luas:

$('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>