我想将 CSS 规则应用于其中一个类与指定前缀匹配的任何元素。
例如我想要一个适用于类以status- 开头的 div 的规则（A 和 C，但在以下 sn-p 中不是 B）：
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
某种组合：div[class|=status] 和 div[class~=status-]
在 CSS 2.1 下是否可行？它在任何 CSS 规范下都可行吗？
注意：我知道我可以使用 jQuery 来模拟它。
【问题讨论】：
标签： css css-selectors
这在 CSS2.1 中是不可行的，但可以使用 CSS3 属性子字符串匹配选择器（IE7+ 支持 ）：
div[class^="status-"], div[class*=" status-"]
注意第二个属性选择器中的空格字符。这会选取div 属性满足以下任一条件的class 元素：
[class^="status-"] — 以“status-”开头
[class*=" status-"] — 包含直接出现在空格字符之后的子字符串“status-”。类名由空格 per the HTML spec 分隔，因此是重要的空格字符。如果指定了多个类，这将检查第一个类之后的任何其他类， 并且 增加了检查第一个类的好处，以防属性值被空格填充（这可能发生在某些输出 @987654329 的应用程序中@ 属性动态）。
当然，这也适用于 jQuery，如 here 所示。
之所以需要如上所述组合两个属性选择器，是因为[class*="status-"] 之类的属性选择器会匹配以下元素，这可能是不可取的：
<div id='D' class='foo-class foo-status-bar bar-class'></div>
如果您可以确保这种情况永远不会发生，那么为了简单起见，您可以随意使用这种选择器。但是，上面的组合更加健壮。
如果您可以控制 HTML 源代码或生成标记的应用程序，则将 status- 前缀作为自己的 status 类而不是 as Gumbo suggests 可能更简单。
【讨论】：
status- 的类并且你不想匹配它，选择器会变得更加复杂：div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-) 另外你失去了对 IE7/IE8 的支持。幸运的是，如果你的标记是理智的，你就不需要排除这样的类。
[class*=" anim-overlay-"] a:hover:after{...}。我的 CSS 类是 anim-overlay-1, anim-overlay-2..... anim-overlay-8
.anim-overlay-*{...}吗？
CSS 属性选择器将允许您检查字符串的属性。 （在这种情况下 - 一个类名）
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
（看起来它实际上是 2.1 和 3 的“推荐”状态）
以下是我*认为它是如何工作的大纲：
[ ] : 是复杂选择器的容器如果你愿意... class : 'class' 是您在这种情况下查看的属性。* : 修饰符（如果有）：在这种情况下 - “通配符”表示您正在寻找任何匹配项。test- ：属性的值（假设有一个） - 包含字符串“test-”（可以是任何值）所以，例如：
[class*='test-'] {
color: red;
}
如果你有充分的理由，你可以更具体，也可以使用元素
ul[class*='test-'] > li { ... }
我试图找到边缘情况，但我认为没有必要使用 ^ 和 * 的组合 - 因为 * 得到了一切......
示例：http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
IE6 以上的一切都会很高兴地服从。 :)
注意：
[class] { ... }
将选择任何具有类...
【讨论】：
[class*='test-'] 将匹配 <div class='foo-test-bar'> 等元素。这是我的回答中描述的需要结合 ^ 和 * 的一种极端情况。而且IE6不支持属性选择器。
你不能这样做。有一个 attribute selector 完全匹配或部分匹配，直到一个 - 符号，但它不会在这里工作，因为你有多个属性。如果您要查找的类名总是第一个，您可以这样做：
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
请注意，这只是为了指出哪个 CSS 属性选择器最接近，不建议假设类名总是在前面，因为 javascript 可以操纵属性。
【讨论】：
这对于 CSS 选择器是不可能的。但是你可以使用两个类而不是一个类，例如status 和 important 而不是 status-important。
【讨论】：