突出显示单击不起作用的行。 CSS优先级

Question

这是我的html文件中的table。我必须在点击时突出显示一行。

<tbody>
  <!--display none-->
  <!--onclick-->
  <tr ng-repeat="case in lastten" ng-click="setSelected(case.Name)" ng-class="{selected: case.Name === idSelected}">
    <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>
</tbody>

css- initialTable是上表的类

table.InitialTable {
  table-layout: fixed;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  margin-top: 20px;
  margin-bottom: 20px;
  border-collapse: collapse;
  border-spacing: 0;
}

table.InitialTable td,
th {
  border: 1px solid transparent;
  height: 40px;
  transition: all 0.3s;
  overflow: hidden;
}

table.InitialTable th {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

table.InitialTable td {
  text-align: center;
  vertical-align: middle;
}

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

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

.InitialTable tr:hover td {
  background: #eee;
}

.selected {
  background: red;
}

这里是角度代码 -

 $scope.idSelected = null;
 $scope.setSelected = function(idSelected) {
   $scope.idSelected = idSelected;
 };

因此，基本上每当选择一行时，它都会选择该类，并且应该突出显示它。但是CSS没有用。那么在悬停下面选择。的优先级是什么？我也尝试了很多其他组合，但它没有用。即使重要也不起作用。我现在已经坚持了很长一段时间。