如何改变背景颜色的条件

How to change background color on condition

本文关键字：背景 颜色 条件 改变 何改变      更新时间：2023-09-26

我使用以下样式来显示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>

在某些情况下，我想改变背景颜色，如黄色，但它不能作为第n个子(偶数)/奇数覆盖黄色。我试过这样做:

<div class="task-container" data-ng-class="{'timeout': alarm.timeOutOccured== true}">
有人能帮我找到正确的方法吗?

假设.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>

相关文章：