Der CSS-Selektor findet eine Teilmenge von Entitäten basierend auf dem Klassenfilter

Question

Ich habe eine Tabelle, die eine Reihe dargestellter Zeilen enthält, und innerhalb dieser Tabellengruppe haben einige Zeilen eine „anklickbare“ Kategorie. Ich versuche, einen Stil auf jede ungerade Zeile anzuwenden, die eine „anklickbare“ Kategorie hat. Ich habe verschiedene Selektoren ausprobiert, aber es scheint, dass der Stil nur auf anklickbare ungerade Zeilen angewendet wird, die ungerade sind, wenn sie auf alle Tabellenzeilen angewendet werden, nicht nur auf diejenigen mit der Klasse „anklickbar“. Ich denke, ich brauche den Selektor, um eine Teilmenge von Zeilen zu finden, die die Klasse „anklickbar“ haben, und dann diese Zeilen für die ungerade Anzahl von Kindern zu durchlaufen.

Wenn die Zeilen 1, 4, 5, 7 und 8 anklickbar sind, möchte ich, dass die Zeilen 4 und 7 hier als die ungeraden Zeilen betrachtet werden. Es scheint jedoch 1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 zu betrachten und bei der Suche nach ungeraden Zeilen mit anklickbarem ( Unter Verwendung von c als Referenz werden nur 4 und 8 ausgewählt, da sie sich im gesamten Zeilensatz an ungeraden Positionen befinden.

Ich habe viele Selektoren ausprobiert, aber kein Glück. Ich hoffe, dass dies ein mögliches Szenario ist und mir jemand, wenn möglich, mit Feedback oder einer Lösung helfen kann.

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>