我想将CSS规则应用于其类之一与指定前缀匹配的任何元素。
例如，我想要一个规则，该规则将适用于以status-（A和C，但在以下代码段中不是B）开头的类的div ：
<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来模拟。
Answers:
它不适用于CSS2.1，但是可以用于CSS3属性子字符串匹配选择器（在IE7 + 中受支持）：
div[class^="status-"], div[class*=" status-"]注意第二个属性选择器中的空格字符。这将选择div其class属性满足以下任一条件的元素：
[class^="status-"] —以“ status-”开头
[class*=" status-"]—包含直接在空格字符后出现的子字符串“ status-”。根据HTML规范，类名称由空格分隔，因此是有效的空格字符。如果指定了多个类，这将在第一个类之后检查所有其他类，并增加了检查第一个类的好处，以防属性值被空格填充（某些class动态输出属性的应用程序可能会发生这种情况）。
当然，这也能在jQuery的，这表现在这里。
如上所述，您需要组合两个属性选择器的原因是因为诸如这样的属性选择器[class*="status-"]将匹配以下元素，这可能是不希望的：
<div id='D' class='foo-class foo-status-bar bar-class'></div>如果您可以确保永远不会发生这种情况，那么为简单起见，您可以自由使用这样的选择器。但是，上述组合更加健壮。
如果您可以控制HTML源代码或生成标记的应用程序，则可以简单地将status-前缀设为自己的status类，而不是像Gumbo建议的那样。
[class*=" anim-overlay-"] a:hover:after{...}。我的CSS类anim-overlay-1，anim-overlay-2.....anim-overlay-8
.anim-overlay-*{...}吗？
CSS属性选择器将允许您检查字符串的属性。（在这种情况下-类名）
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors
（看起来它实际上处于2.1和3的“推荐”状态）
这是我*如何工作的概述：
[ ]：如果需要的话，是复杂选择器的容器... class：“类”是您在这种情况下要查看的属性。* ：修饰符（如果有）：在这种情况下-“通配符”表示您正在寻找任何匹配项。test- ：属性的值（假设有一个）-包含字符串“ test-”（可以是任意值）因此，例如：
[class*='test-'] {
color: red;
}如果您有充分的理由，也可以更具体一些
ul[class*='test-'] > li { ... }
我已经尝试查找边缘情况，但是我认为不需要使用^and 的组合，*因为*可以得到所有...
例如：http：//codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
高于IE6的一切都将愉快地服从。:)
注意：
[class] { ... }
会选择一个班级的任何东西...
[class*='test-']将匹配诸如的元素<div class='foo-test-bar'>。这是一个边缘情况，需要结合我的答案中所述的^和*。IE6不支持属性选择器。
您不能这样做。有一个属性选择器可以完全匹配或部分匹配，直到-号为止，但在这里不起作用，因为您有多个属性。如果您要查找的类名始终是第一个，则可以这样做：
<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可以操纵属性。
status-而又不想与之匹配，那么选择器将变得更加复杂：div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)加上您会失去对IE7 / IE8的支持。值得庆幸的是，如果您的标记是合理的，则无需排除此类。