用 Angular 覆盖 Foundation table 背景色单行

Question

在用户列表中，我想突出显示与用户当前排名相匹配的特定行。我的问题是，即使条件表达式匹配，ng-class 它似乎也不会覆盖该行的 Foundation background-color。该行如下所示：

<tr ng-repeat="user in displayUsers" ng-class="{'userSelectedBackground': user.rank == regularRank}">

我输出 user.rank == regularRank 只是为了测试它，我确实在我想要突出显示的行上返回了 true。开发者工具显示我的 userSelectedBackground class 正在被应用，但我看不到它被覆盖的地方。我也试过附加一个 !important 标签，但没有成功：

.userSelectedBackground {
    background-color: #4C4CFF !important;
}

Answer 1

Foundation 的 :nth-of-type(even) 规则优先于您的 class 样式。您需要更具体地定位它：

.userSelectedBackground,
.userSelectedBackground:nth-of-type(even),
.userSelectedBackground:nth-of-type(odd){
  background-color:red;
}

这是一个demo。

用 Angular 覆盖 Foundation table 背景色单行

Overwrite Foundation table background color single row with Angular

css

zurb-foundation

angularjs