突出顯示一行懸停無法正常工作！重要

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的交替bg顏色並懸停，您可以設置td的bg顏色。

或者，你可以使用以下的選擇，以增加懸停選擇的優先

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選擇指定值比基礎的指定值更大。

換句話說，table tr:nth-child(odd) td的指定值大於table tr td。所以在懸停時，tr td被忽略。因爲table tr:nth-child(odd) td有背景色#ffffff。

如果使用!important語法，它將指定值的最大值。所以它的作品。