CSS 类未应用于表格行答案

【问题标题】：CSS class is not getting applied to table rowCSS 类未应用于表格行
【发布时间】：2017-09-13 07:38:40
【问题描述】：

以下是使用的 css 类：

.table-striped>tbody>tr:last-child>td,
.table-striped>tbody>tr:last-child>th>.total_row_dark {
  background-color: #76767b !important;
  color: #fff;
  font-weight: 700;
}

tr.campare_row span {
  background-color: #76767b;
  border-radius: 5px;
  color: #ffffff !important;
  display: inline-block;
  font-weight: bold;
  margin: 3px;
  padding: 6px 18px;
  font-size: 16px;
  border: 1px solid #ffffff;
}

.campare_row>td {
  vertical-align: middle!important;
}

这些类应该用于此处的下表行：

<tr class="campare_row total_row_dark" ng-repeat="location in vm.rwsTableData | filter : 'Summary'" ts-repeat>
  <td> </td>
  <td class="text-left">{{location.locationName}}</td>
  <td class="text-right light-blue">{{(location.waterDemand == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDemand | number:2}}</td>
  <td class="text-right light-blue">{{(location.waterSupply == vm.constant.NO_WATER_SUPPLY)?'-':location.waterSupply | number:2}}</td>
  <td class="text-right light-blue" ng-if="location.waterDemand != vm.constant.NO_WATER_SUPPLY && location.waterDeficit != vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDeficit | number:2}} ({{(location.waterDemand != 0)?((location.waterDeficit*100)/location.waterDemand):0 | number:2}}%)</td>
  <td class="text-right light-blue" ng-if="location.waterDemand == vm.constant.NO_WATER_SUPPLY || location.waterDeficit == vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':(location.waterDeficit | number:2)}}</td>
  <td class="text-right light-orange">{{vm.getStressValue(location.locationStressIndicator)}}</td>
  <td class="text-right light-orange">{{location.impactedPopulation | number}}</td>
  <td class="text-right light-blue">{{location.numOfTankersAsOfToday | number}}</td>
  <td class="text-right light-blue">{{location.numOfTankersForToday | number}}</td>
  <td></td>
</tr>

根据类描述，表中的最后一行应分别更改为上述背景颜色、文本颜色和字体粗细。但它没有改变，最后一行是整个表格的颜色。如何解决这个问题？

【问题讨论】：

你也能展示一下表结构是什么吗？
就像这个小提琴显示的那样：jsfiddle.net/4tvovto7/1 - 你能告诉我们结果表吗？你错过了班级名称吗？还是身体？
请为我们提供一个完全可重现的例子...我们也需要

标签： javascript html css

【解决方案1】：

这将适用于最后一行

.table-striped>tbody>tr:last-child>td,
.table-striped>tbody>tr:last-child>th>.total_row_dark {
  background-color: #76767b !important;
  color: #fff;
  font-weight: 700;
}


tr.campare_row:last-child {
  background-color: #76767b;
  border-radius: 5px;
  color: #ffffff !important;
  display: inline-block;
  font-weight: bold;
  margin: 3px;
  padding: 6px 18px;
  font-size: 16px;
  border: 1px solid #ffffff;
}
.campare_row>td {
  vertical-align: middle!important;
}

<table>
<tr class="campare_row total_row_dark" ng-repeat="location in vm.rwsTableData | filter : 'Summary'" ts-repeat>
  <td> </td>
  <td class="text-left">{{location.locationName}}</td>
  <td class="text-right light-blue">{{(location.waterDemand == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDemand | number:2}}</td>
  <td class="text-right light-blue">{{(location.waterSupply == vm.constant.NO_WATER_SUPPLY)?'-':location.waterSupply | number:2}}</td>
  <td class="text-right light-blue" ng-if="location.waterDemand != vm.constant.NO_WATER_SUPPLY && location.waterDeficit != vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':location.waterDeficit | number:2}} ({{(location.waterDemand != 0)?((location.waterDeficit*100)/location.waterDemand):0 | number:2}}%)</td>
  <td class="text-right light-blue" ng-if="location.waterDemand == vm.constant.NO_WATER_SUPPLY || location.waterDeficit == vm.constant.NO_WATER_SUPPLY">{{(location.waterDeficit == vm.constant.NO_WATER_SUPPLY)?'-':(location.waterDeficit | number:2)}}</td>
  <td class="text-right light-orange">{{vm.getStressValue(location.locationStressIndicator)}}</td>
  <td class="text-right light-orange">{{location.impactedPopulation | number}}</td>
  <td class="text-right light-blue">{{location.numOfTankersAsOfToday | number}}</td>
  <td class="text-right light-blue">{{location.numOfTankersForToday | number}}</td>
  <td></td>
</tr>
</table>

【讨论】：

【解决方案2】：

我看到您正在使用引导程序table-striped，并且它的样式可能会覆盖您的自定义样式。所以要确保添加!important 并检查它是否出现。（使用 !important 通常不是很好的做法）

【讨论】：