在Angular中覆盖CSS类

Question

我有用于表和CSS的以下HTML

HTML

<table *ngIf="tableRows.length > 0" class="design-table table-hover">

CSS

.design-table {
    border-collapse: separate; 
    border-spacing: 0 4px;
    font-size: 14px;
}

我想知道如何在不更改border-spacing CSS的情况下将4 4px更改为.design-table，因为它在许多其他地方都被使用。

Answer 1

您可以像其他CSS框架一样做到这一点。例如，在布尔玛（Bulma），您有一个班级，例如button，如果要更改外观，可以添加另一个班级，例如is-primary或is-danger等。

如果您可以在代码中编辑HTML或在运行时对其进行修改，则始终可以使用更具体的CSS选择器：

HTML

<table *ngIf="tableRows.length > 0" class="design-table special-border table-hover">

CSS

.design-table {
    border-collapse: separate; 
    border-spacing: 0 4px;
    font-size: 14px;
}
.design-table.special-border {
    border-spacing: 4px 4px;
}