Javascript 如何定位CSS类名的一部分？

示例1工作：

HTML:

示例2没有：

HTML:

示例2有多个类，所以CSS方法停止工作。在实时项目中，多个类将是随机的，除了它们之间的一个，前缀-动态-值-后缀之间的值也将是随机的，如何将同一元素中的其他类作为目标？因为示例1的方法不起作用。

试试[class*=…]

div[class*=前缀-][class*=后缀]{ 颜色：红色； } 项目1 项目2 项目3

---

通过检查元素上的某个类是否以前缀开头并以后缀结尾，可以使用js实现这一点。如果检查返回true，则运行代码

document.querySelectorAll'.items>div'.forEachel=>{ 常量检查=[…el.classList].somecls=>{ 返回带有“前缀”的cls.starts和带有“后缀”的&cls.endsWith } 如果检查{ el.style.color='红色' } } 项目1 项目2 项目3

---

如果项目为“全部”，则可以添加红色项目。。那么类选择器将是.item.red，在..之间没有空格。。然后它必须至少有class=item red。。只是基本的css[attribute^='value']和[attribute$='value']分别选择以属性值开头和以属性值结尾的HTML标记。这并不意味着它将查看属性中的类属性值是以该值开始还是以该值结束。只需使用div.prefix-item-suffix{}并创建其他类来执行其他操作。*=仅表示包含，不考虑顺序。您需要在前缀匹配之后和后缀匹配之前添加适当的连字符。否则，您将匹配在类的任何部分中具有该字符串的所有类。例如，[class*=前缀-]。

<div class="items">
  <div class="item">item 1</div>
  <div class="prefix-item-suffix">item 2</div>
  <div class="item">item 3</div>
</div>

div[class^="prefix"][class$="suffix"] {
  color: red;
}

<div class="items">
  <div class="item">item 1</div>
  <div class="multiple prefix-item-suffix classes">item 2</div>
  <div class="item">item 3</div>
</div>

div[class^="prefix"][class$="suffix"] {
  color: red;
}