html - 表奇数偶数tr backgroundcolor在特定类上

我只想更改.headcol类的奇数tr的背景颜色。

.headcol是左侧的粘性列。

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-family: Poppins-Thin, sans-serif;
}

.headcol {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background-color: white;
}

.headcol tr:nth-child(odd) {
  background-color: blue;
}

<table class="table" id="TabListing">
 <thead class="thead-dark">
   <th class="headcol">Nom</th>
   <th>Prénom</th>
 </thead>

<tbody>
 <tr>
  <td class="headcol">BAR</td>
  <td>Mohamed</td>
 </tr>
<tr>
 <td class="headcol">BIAI</td>
 <td>Ikrame</td>
 </tr>

</tbody>
</table>

这段代码没有给我任何东西...

如果我尝试：

tr:nth-child(odd) {
  background-color: blue;
}

奇怪的是蓝色，但不是.headcol

最佳答案

所以你很亲近。但是请记住-假定左侧的选择器项包含右侧的选择器项（除非在选择器中的选择器之间放置了一些特定的运算符以更改关系）。所以这：

.headcol tr:nth-child(odd) {
  background-color: blue;
}

...正在用类tr描述元素内的每个奇数.headcol，这永远不会反映在您的标记中。相反，您要在奇数编号的.headcol内选择任何tr分类的元素，这将是：

tr:nth-child(odd) .headcol {
  background-color: blue;
}

如果我正确理解了以下代码，这就是我在以下代码段中所做的事情，它似乎符合您的要求。

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-family: Poppins-Thin, sans-serif;
}

.headcol {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background-color: white;
}

tr:nth-child(odd) .headcol {
  background-color: blue;
}

<table class="table" id="TabListing">
    <thead class="thead-dark">
        <th class="headcol">Nom</th>
        <th>Prénom</th>
    </thead>
    <tbody>
        <tr>
            <td class="headcol">BAR</td>
            <td>Mohamed</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Ikrame</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Alex</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Clement</td>
        </tr>
        <tr>
            <td class="headcol">BIAI</td>
            <td>Rachel</td>
        </tr>
    </tbody>
</table>