我如何定位动态类名？

Question

您好，我目前正在为我的 discord 创建一个自定义 css 文件并更改一些元素外观，我需要知道如何定义一个 class，其中它有一个 id在连字符之后，例如。

<div class="avatarDefault-ai3nf">

avatarDefault select 你会怎样？

Answer 1

您正在寻找

[class^="avatarDefault"] {
  /* styles here */
}

它针对具有 class 属性且以 "avatarDefault" 开头的所有元素。

您还可以使用 [class*="avatarDefault"]，它针对 class 中包含 avatarDefault 字符串的所有元素。

注意：在处理 class 时，最好使用 contains 运算符，因为在更大规模的应用程序中，您 add/remove class es 使用 JavaScript，您不能确定字符串始终保留在 class 属性的开头。例如，starts with 选择器不会匹配这个元素：

<div class="random-class avatarDefault-ai3nf"></div>

...但是 contains 选择器将匹配它。

---

但是，如果您可以更改标记（或创建标记的任何内容），最好将唯一标识符放在 id 属性中并使用 class 作为 collection 标识符：

<div id="ai3nf" class="avatarDefault"></div>

... 并使用 .avatarDefault 设置 collection.

元素的样式