5

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

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

http://jsfiddle.net/mC2EW/

不要与使用两个带有 * 的 css 属性选择器混淆

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

4

4 回答 4

4

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

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

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

于 2015-05-15T00:32:43.373 回答
2

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

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

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

于 2013-02-15T15:23:37.073 回答
2

您是否有理由不能简单地使用[class*="amount"]？

JSFiddle 示例。

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

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

JSFiddle 示例使用data.

于 2013-02-15T15:20:59.770 回答
2

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

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

于 2013-02-16T03:16:07.863 回答