我有一个表，其中包含一系列表示的行，在该组表中，有些行具有“可点击”类别。我试图做的是将样式应用于具有“可点击”类别的每个奇数行。我尝试了各种选择器，但它似乎只将样式应用于可单击的奇数行，这些行在应用于所有表行时是奇数，而不仅仅是那些具有“可单击”类的行。我想我需要选择器来查找具有“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; }
| Dean | Canada | True |
| Fred | Canada | True |
| Sam | Canada | True |
| Gina | Canada | True |
| Sam | Canada | True |
| Alex | Canada | True |
| Eli | Canada | True |
| Emma | Canada | True |
| John | Canada | True |
| Sophie | Canada | True |
| Sarah | Canada | True |
这就是您要找的：
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; }