在角度 2 中动态设置以 "mark-as-" 开头的所有类的样式

Question

我希望能够在我的组件中动态设置，无论是否以" mark-as"开头的类名称元素，" mark-as-cat"(将具有黄色背景。

我可以将以下内容添加到组件CSS文件：

*[class^="mark-as-"] {
background: #ffff00;
}

但我想知道如何在组件逻辑中动态启用/禁用它而不更改元素类名称。

Answer 1

您可以使用下面的CSS方法。

您可以访问CSS选择器以获取更多CSS选择器的了解。

[class*="mark-as-"] {
background: #ffff00;
}

以下一个示例以使其更易于理解。

.mark-as-red {
  color:#fff;
}
.yellow-mark {
  color:#fff;
}
p[class*="-as-red"] {
background: #999;
}
p[class^="yellow-"] {
background: yellow;
}

<p class="mark-as-red ">
HELLO
</p>
<p class="yellow-mark ">
HELLO
</p>