我有一個(gè)表,其中包含一系列表示的行,在該組表中,有些行具有「可點(diǎn)擊」類別。我試圖做的是將樣式應(yīng)用於具有“可點(diǎn)擊”類別的每個(gè)奇數(shù)行。我嘗試了各種選擇器,但它似乎只將樣式應(yīng)用於可單擊的奇數(shù)行,這些行在應(yīng)用於所有表行時(shí)是奇數(shù),而不僅僅是那些具有“可單擊”類的行。我想我需要選擇器來尋找具有“clickable”類別的行子集,然後為奇數(shù)子項(xiàng)迭代這些行。
如果第 1、4、5、7 和 8 行可單擊,那麼我希望第 4 行和第 7 行被視為此處的奇數(shù)行。但是,它似乎會(huì)查看1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 並在尋找具有可點(diǎn)擊的奇數(shù)行時(shí)(使用c 作為參考)僅選擇4、8,因?yàn)樗鼈兾混墩麄€(gè)行集的奇數(shù)位置。
我嘗試了很多選擇器,但沒有運(yùn)氣。我希望這是一種可能的情況,並且有人可以幫助我提供一些回饋,或者如果可能的話提供解決方案。
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>
這就是您要找的:
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>