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

Question

示例 1 有效:

HTML:

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

CSS:

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

示例 2 没有:

HTML:

<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>

CSS:

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

示例 2 有多个类，因此 CSS 方法不再起作用。在实时元素中，除了它们之间的目标类之外，多个类将是随机的，prefix-the_dynamic_value-suffix之间的值也将是随机的，如何将其与同一元素内的其他类作为目标？因为示例 1 方法不起作用。

Answer 1

尝试[class*=…]

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>