角条件类被覆盖

Question

我有2个CSS类，date-today有条件地应用于元素，但由于日期将其覆盖而无法使用。

.date-today {
    color: red;
}

.date {
    color: green;
}

Componenet：

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

Answer 2

您可以将color: red;更改为color: red!important;，但是也许可以移动您的date类设置到[ngClass]并将其放置在像下面的顺序

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

Answer 3

您可以使用此

<p [class.date]="!today" [class.date-today]="today">
  Start editing to see some magic happen :)
</p>
<button (click)="today = true">today</button>