html - 在悬停时突出显示一行，如果没有 !important 则不起作用

Question

这是我的 html 文件中的表格。我正在尝试悬停效果，但如果没有 !important，它就无法工作。

<tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">
    <td colspan="1">{{case.Name}}</td>
    <td colspan="1">{{case.Total}}</td>
    <td colspan="1">{{case.Passed}}</td>
    <td colspan="1">{{case.Failed}}</td>
</tr>

css- 如果我删除 !important 。它不会工作。

table {
  width:100%;
  table-layout: fixed;
}

table tr:nth-child(even) td {
  background: #f3f7fb;
}

table tr:nth-child(odd) td {
  background: #ffffff;
}

tr:hover td {
  background: #eee !important;
}

Answer 1

您正在尝试使用两个不同的选择器更改 td 的背景颜色。 table tr:nth-child(even) td 比 tr:hover td 具有更高的优先级。设置 tr 的交替背景色，悬停时可以设置 td 的背景色。

或者，您可以使用以下选择器来增加悬停选择器的优先级

tr:nth-child(n):hover td {
  background: #eee;
}

table {
    width:100%;
  table-layout: fixed;

}

table tr:nth-child(even){
  background: #f3f7fb;
}

table tr:nth-child(odd) {
  background: #ffffff;
}

    tr:hover td {
      background: #eee;
    }

<table><tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">

                            <td colspan="1">{{case.Name}}</td>
                            <td colspan="1">{{case.Total}}</td>
                            <td colspan="1">{{case.Passed}}</td>
                            <td colspan="1">{{case.Failed}}</td>


                        </tr>
  <tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">

                            <td colspan="1">{{case.Name}}</td>
                            <td colspan="1">{{case.Total}}</td>
                            <td colspan="1">{{case.Passed}}</td>
                            <td colspan="1">{{case.Failed}}</td>


                        </tr>
  </table>