为多个类创建一个禁用的css类

Question

我有多个css类，使用SCSS组成一个按钮。

.ghost-button {
// CSS goes here
}
.ghost-button-label {
// CSS goes here
}
.plus-circle {
//CSS goes here
}

使用角我可以控制使用以下功能禁用状态。

[class.disabled]="booleanFlag"

我想让这个按钮有一个禁用状态，而不是有多个禁用类，像这样，

.ghost-button.disabled {
// CSS goes here
}
.ghost-button-label.disabled {
// CSS goes here
}
.plus-circle.disabled {
//CSS goes here
}

这是我正在尝试做的一个例子。这对我不起作用

.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}

这是我为按钮使用的标记，

<div style="padding-top: 10px" (click)="handleClickAdd($event)">
<div class="ghost-button ghost-button-label icon-custom icon-margin plus-circle plus-circle-position" [class.disabled]="blockAdditions">
<div>
<div>Add</div>
</div>
</div>
</div>

有办法做到这一点吗?谢谢。

Answer 1

这行不通，因为这意味着每个类都是前一个类的后代:

.ghost-button .ghost-button-label .plus-circle-position .disabled {
//CSS goes here
}

如果你想选择包含所有四个类的一个div，只需删除空格:

.ghost-button.ghost-button-label.plus-circle-position.disabled {
//CSS goes here
}

如果您试图选择任何具有禁用类和其他三个类之一的元素，则使用逗号分隔不同的组合:

.ghost-button.disabled,
.ghost-button-label.disabled,
.plus-circle-position.disabled {
// CSS
}

当然，如果你想把这个CSS应用到每个禁用类的元素上，你可以选择.disabled:

.disabled {
// CSS
}

一定要考虑到视图封装。如果这个类存在于多个组件中，你可能需要把这个CSS放到全局样式文件styles.css中。

---

请注意，这里没有设置disabled状态，您正在添加一个名称为"disabled"的类。disabled是一个布尔属性，你可以通过HTML设置，然后你可以选择伪类:disabled。

button:disabled {
color: red
}

<button>Not Disabled</button>
<button disabled>Disabled</button>

如果这是你真正想要做的，那么在Angular中应该是:

[disabled]="booleanFlag"

Answer 2

您可以使用:disabled伪类https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled来定位被禁用的元素

所以根据你的按钮/标签/加圈之间的关系，你应该能够根据按钮是否被禁用来瞄准那些。例如，如果按钮和标签是兄弟关系，您可以这样做:

.ghost-button:disabled,
.ghost-button:disabled + .ghost-button-label,
.ghost-button:disabled + .plus-circle {
// CSS goes here
}

只有当标签和圆圈是在按钮之后的兄弟姐妹时才会起作用，如果它们在按钮之前，你不能那样选择它们