亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS 選擇器根據(jù)類別篩選器尋找實(shí)體子集
P粉293550575
P粉293550575 2023-09-06 23:21:53
0
1
705

我有一個(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>

P粉293550575
P粉293550575

全部回覆(1)
P粉190883225

這就是您要找的:

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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板