突出显示一行悬停不工作没有!重要

Question

这是我的html文件中的表。我正在尝试悬停效果，但没有!重要。

<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-如果我删除!重要的。它将无法工作。

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>

Answer 2

看起来:nth-child选择器的指定值大于base的指定值

即table tr:nth-child(odd) td的指定值大于table tr td。所以悬停时，tr td被忽略。因为table tr:nth-child(odd) td的背景色是#ffffff .

如果使用!important语法，则指定value最大值。