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

Question

考虑以下两种可能的标记：

<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选择器。问题正是我需要的类可能位于类数组中的任何位置。

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

http://jsfiddle.net/mC2EW/

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

//edit1：简化问题 //edit2: 添加了一个小提琴

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

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

Answer 2

抱歉，鉴于您目前的情况，仅使用选择器是不可行的。属性选择器无法在值的中间使用通配符，也无法检查以空格分隔的属性中的各个组件，类选择器也不提供此类功能。你可以认为这是 AngularJS 或 CSS 之一的设计缺陷，但不管它是什么，这对于纯 CSS 选择器是不可行的。

您将必须以不同的方式解决这个问题。如 cmets 中所述，您可以轻松地连接到 ng-class 以添加自定义类以使选择更容易，或者按照另一个答案中的建议，考虑使用数据属性来存储验证信息。

Answer 3

我认为您可以在这里做的最好的事情是查找 .someclass，然后检查它是否也有确定：

input.someclass[class*="determined"] { background-color: red; }

小提琴：http://jsfiddle.net/gaE5X/

Answer 4

你有什么理由不能简单地使用[class*="amount"]？

JSFiddle example.

听起来您正在使用类来保存更适合 data-* 属性的内容。

<input class="someClass determined" data-validity="valid" data-amount-determined="false" />
<input class="someClass determined" data-validity="invalid" data-amount-determined="true" />

JSFiddle example using data.