如何定位动态classNames？

Question

您好我正在为我的不和谐做一个自定义css文件，并且要更改一些元素看起来我需要知道如何定义一个在连字符后面有id的类，例如。

<div class="avatarDefault-ai3nf">

您如何按avatarDefault选择？

Answer 1

您正在寻找

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

它定位所有class属性的元素，以＆＃34; avatarDefault＆＃34;开头。

您还可以使用[class*="avatarDefault"]定位课程中包含avatarDefault字符串的所有元素。

注意：在处理class时，最好使用 contains 运算符，就像在大型应用程序中一样，使用JavaScript添加/删除类，您可以＆＃39 ;确保字符串始终保留在class属性的开头。例如，以选择器开头，不匹配此元素：

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

...但包含选择器会匹配它。

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

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

...并使用.avatarDefault设置集合元素的样式。