tr：悬停＆amp; tr：nth-​​child（奇数〜偶数）不能一起工作

Question

我想在悬停时突出显示表格行。所以我使用了以下CSS规则，

.my-table tbody tr:hover{
  background-color: #BFC0C2;
}

它独自运作良好。后来我已经包含了CSS规则，为表的奇数行和偶数行创建了不同的背景颜色，

.my-table tbody tr:nth-child(odd){
  background: #FFFFFF;
}
.my-table tbody tr:nth-child(even){
  background: #f2f2f3;
}

现在奇数行和偶数行具有不同的背景颜色但是在悬停时行不会突出显示。我不能一起使用它们吗？ Here是掠夺者。

Answer 1

这是一个特异性/级联问题。

重新排序CSS

td {
  padding: 10px;
  border: 1px solid grey;
}
.table tbody tr:nth-child(odd) {
  background: #FF0000;
}
.table tbody tr:nth-child(even) {
  background: green;
}
.table tbody tr:hover {
  background: grey;
}

<table class="table">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

OR 以相同的方式增加悬停的特定性

td {
  padding: 10px;
  border: 1px solid grey;
}
.table tbody tr:nth-child(n):hover {
  background-color: #BFC0C2;
}
.table tbody tr:nth-child(odd) {
  background: #FF0000;
}
.table tbody tr:nth-child(even) {
  background: green;
}

<table class="table">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 2

您还可以更改td的背景

  .my-table tbody tr:hover td {
    background-color: #BFC0C2;
  }
  .my-table tbody tr:nth-child(odd) {
    background: #FFFFFF;
  }
  .my-table tbody tr:nth-child(even) {
    background: #f2f2f3;
  }

Answer 3

它只是选择器的特异性问题，增加它我的任何意思都将解决问题的例子

.my-table tbody tr:hover {
    background-color: #BFC0C2 !important;
} 

Answer 4

在浏览器中检查您可以看到两个选择器都适用，但有一个被覆盖：

只需将其放在代码中或添加!important，它就能正常工作。