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

如何创建一个匹配任意两个特定字符串的动态字符串的选择器：如何仅基于两个字符串之间具有字符串来选择CSS类？

[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选择器可以做到这一点？

来源

2017-08-16 Jonathan002

不幸的是不是CSS属性选择器支持的东西。您可以在文档中看到当前支持的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – gespinha

您需要为此支持JavaScript。 – TylerH

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

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>

来源

2017-08-16 13:11:10 Gerard

非常感谢。虽然这只允许它，如果类是特别具有动画blabla无限。是否有可能使它与class =“animation-blabla-infinite another-class”一起工作 – Jonathan002

这对于'class =“animation-opacity-infinite-somethingElse”不起作用'' – Ehsan

@ehsan，那不是问题。任何一组两个特定的字符串在它们之间带有一个动态字符串。我甚至没有看到这些例子。现在我做了，他们不符合最初的要求。 – Gerard

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

回答

相关问题