Выделите строку с зависанием, не работая без! Important

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. Установите переменный цвет bg в tr и на hover вы можете установить цвет bg 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 селектор указать значение больше, чем базировать уточним значение.

Иными словами, table tr:nth-child(odd) td уточняйте значение больше, чем table tr td. Таким образом, при зависании, tr td игнорируется. потому что table tr:nth-child(odd) td имеет цвет фона #ffffff.

Если используется синтаксис !important, он задает максимальное значение значения. поэтому он работает.