CSS 属性选择器、多个类、应用于一个类定义的通配符可能吗？

Question

考虑以下具有 2 种可能性的标记:

<input class="someclass ng-valid ng-invalid-otherstuff ng-valid-amountdetermined   some-other-class">
<input class="someclass ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined some-other-class">

“金额”是一个可变词，可以是任何东西，“消息”、“帐户”，任何东西。我需要能够在 CSS 中做出区分。属性选择器失败了，因为它考虑了 ^、*、| 的整个属性值甚至〜。

我需要挑出一个类，然后检查该类是否为“ng-valid-*determined”。在我看来，这根本不可能使用 css，还是我遗漏了什么？

解决方法是生成“ng-valid-determined*”，但这正是我想要避免的。有人对此有任何想法吗？作为澄清，我不知道“someclasses”是什么，我不能用它们来精确定位我的 css 选择器。问题恰恰是我需要的类可能位于类数组内的任何位置。

我创建了一个 fiddle 来可视化问题，这当然不是解决方案，因为我需要能够定位 ng-valid-*determined 或 ng-invalid-*determined

http://jsfiddle.net/mC2EW/

不要与 using two css attribute selectors with * 混淆

//edit1: 简化问题 //edit2: 添加了一个 fiddle

Answer 1

尽管这是一个旧的解决方案，但我一直在寻找类似的解决方案。我相信我有最好的答案，请看我的pen .

HTML

<input class="someclass ng-valid ng-invalid-otherstuff
ng-valid-amountdetermined some-other-class"> <input class="someclass
ng-invalid ng-valid-otherstuff ng-invalid-amountdetermined
some-other-class">

CSS

[class*=ng-valid][class*=ng-invalid-otherstuff][class*=determined] {
background: #000; }
[class*=ng-invalid][class*=ng-valid-otherstuff][class*=determined] {
background: #ddd; }

事实证明，虽然您不能在同一个属性选择器中定位多个通配符，但您可以链接通配符属性选择器来找到您的目标。