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- *确定或ng-invalid- *确定

http://jsfiddle.net/mC2EW/

不要与using two css attribute selectors with *

混淆

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

Answer 1

是否有理由不能简单地使用[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

Answer 2

很抱歉，鉴于您目前的情况，仅针对选择器无法做到这一点。属性选择器没有在值中间使用通配符的方法，也不能允许在空格分隔的属性中检查单个组件，类选择器也不提供此类功能。您可以将此视为AngularJS或CSS之一的设计缺陷，但不管它是什么，它都不适用于纯CSS选择器。

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

Answer 3

我认为你在这里做的最好的事情就是寻找.someclass，然后检查它是否也确定了：

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

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

Answer 4

即使这是旧的，我也在寻找类似的解决方案。我相信我有最好的答案，请参阅我的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; }

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

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

4 个答案: