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

原文 标签 css css-selectors

考虑以下具有 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

最佳答案

尽管这是一个旧的,但我一直在寻找类似的解决方案。我相信我有最好的答案,请看我的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 属性选择器、多个类、通配符应用于一个类定义可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14897634/

相关文章:

css - CSS Target *类,带-和number

html - 处理可变内容边际的最佳实践方法是什么?

html - 如何使用CSS3模式?

jquery - 选择器性能 - 'E#id' 与 '#id' - 在 CSS 和 jQuery 中

CSS首子选择器问题

html - 在选项标签内更改标题属性的样式

css - 正则表达式搜索替换CSS

javascript - 捆绑javascript/css

css - flexbox 内的图像高度在 Chrome 中不起作用

html - 具有不同屏幕尺寸的图像映射。