html - Angular 条件类被覆盖

Question

我有 2 个 CSS 类，date-today 有条件地应用于一个元素，但它不起作用，因为日期覆盖了它。

.date-today {
    color: red;
}

.date {
    color: green;
}

组件网:

[ngClass]="{ 'date-today': date.isToday() }"

如何让 date-today 类覆盖 date？

Answer 1

更改css规则的顺序以防止覆盖(它调用specificty)

/*date first*/
.date {
    color: green;
}
/*date-today second*/
.date-today {
    color: red;
}

<div class="date date-today">
date
</div>

查看规则顺序更改时会发生什么:

.date-today {
    color: red;
}
.date {
    color: green;
}

<div class="date date-today">
date
</div>