如何仅基于两个字符串之间的字符串选择CSS类？

Question

如何创建一个匹配任意两个特定字符串集的选择器，它们之间有动态字符串？：

e.g。

[class*="animation-"**"-infinite"] {
    animation-iteration-count: infinite;
}

所以它可以定位这些类：

class="animation-hover-infinite"
class="animation-scale-infinite"
class="animation-opacity-infinite-somethingElse"
class="animation-etc-infinite withSomeOtherClass"

但不是针对此：

class="animation-something"
class="something-infinite"

这可能吗？或者是否有其他CSS选择器可以实现这一目标？

Answer 1

如果有帮助，您可以检查开始和结束。

div[class^="animation-"][class$="-infinite"] {
  animation-iteration-count: infinite;
  background: red;
}

div {
  width: 100px;
  height: 100px;
  background: blue;
  margin-bottom: 1em;
}

<div class="animation-blabla-infinite"></div>
<div class="animation-blabla-infinites"></div>
<div class="zanimation-blabla-infinite"></div>