Question

以下是使用的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>

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

Answer 1

这适用于最后一行

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我看到你正在使用bootstrap MonadProcess m => (a -> m b) -> Match b，也许它的风格会覆盖你的自定义样式。因此，要确保添加doSomethingWithString :: String -> Cluster () doSomethingWithString str = do s < get put $ modifyState s str doSomethingWithInt :: Int -> Cluster () ... mystatefulcomp :: Cluster () mystatefulcomp = do old_state <- get id =<< receiveWait [ match $ return . doSomethingWithString , match $ return . doSomethingWithInt ] new_state <- get say $ "old state " ++ (show old_state) ++ " new " ++ (show new_state)并检查它是否显示。（使用！重要的是一般的做法不是很好）

CSS类未应用于表行

2 个答案: