我有一個表，其中包含一系列表示的行，在該組表中，有些行具有「可點擊」類別。我試圖做的是將樣式應用於具有“可點擊”類別的每個奇數行。我嘗試了各種選擇器，但它似乎只將樣式應用於可單擊的奇數行，這些行在應用於所有表行時是奇數，而不僅僅是那些具有“可單擊”類的行。我想我需要選擇器來尋找具有“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; }