将样式设置为以＆＃34; mark-as - ＆＃34;开头的所有类。动态角度2

Question

我希望能够在我的组件中动态设置，无论一个类名是否以＆＃34开头的元素;标记为＆＃34; （例如＆＃34; mark-as-car＆＃34;，＆＃34; mark-as-cat＆＃34;）将具有黄色背景。

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

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

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

Answer 1

您可以使用以下css方法。

您可以访问css selectors了解有关css选择器的更多知识。

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

下面是一个更容易理解的例子。

＆＃13;

＆＃13;

.mark-as-red {
  color:#fff;
}

.yellow-mark {
  color:#fff;
}


p[class*="-as-red"] {
background: #999;
}

p[class^="yellow-"] {
background: yellow;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;