如何根据条件更改背景颜色

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 中。我在ng-repeat 中使用div：

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

在某些情况下，我想将背景颜色更改为黄色，但它不能作为 nth-child(even)/odd 覆盖黄色。我尝试了类似的方法：

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