Question

我使用以下样式在我的页面中显示div甚至是奇数组合：的CSS：

.task-container:nth-child(even) {
    background: none;
}

.task-container:nth-child(odd) {
    background: rgba(2, 104, 144, .05);
}

.timeout {
    background-color: #ffc;
}

在HTML中。我在div中使用ng-repeat：

<div class="task-container">
    ... other divs
</div>

在某些情况下，我想要将背景颜色更改为黄色，但它不能作为nth-child（偶数）/奇数覆盖黄色。我尝试过类似的东西：

<div class="task-container" data-ng-class="{'timeout': alarm.timeOutOccured== true}">

有人可以帮我找到正确的方法吗？

Answer 1

假设在.timeout元素上正确添加了div类，您只需在CSS中添加!important：

.timeout {
    background-color: #ffc !important;
}

这是因为，.task-container:nth-child(even)或.task-container:nth-child(odd)更具体，因此会获得更高的优先级。

此外，建议不要使用!important，这样您就可以编写更具体的选择器（并且您不需要!important标志）：

.task-container.timeout {
    background-color: #ffc;
}

请参阅下面的简化示例：

.task-container:nth-child(even) {
  background: none;
}
.task-container:nth-child(odd) {
  background: rgba(2, 104, 144, .05);
}
.task-container.timeout {
  background-color: #ffc;
}

<div class="task-container">
1
</div>
<div class="task-container">
2
</div>
<div class="task-container timeout">
3
</div>
<div class="task-container">
4
</div>
<div class="task-container">
5
</div>
<div class="task-container">
6
</div>
<div class="task-container timeout">
7
</div>

如何在条件下更改背景颜色

1 个答案: