我想应用CSS规则的任何元素，其类之一匹配指定的前缀。
例:我想要一个规则，将适用于div的类开始状态- (a和C，但不是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-]
它在css2.1下可行吗?在任何CSS规范下都是可行的吗?
注意:我知道我可以使用jQuery来模拟它。
你不能这么做，不。有一个属性选择器可以精确匹配或部分匹配直到-号，但它在这里不起作用，因为您有多个属性。如果你正在寻找的类名总是在第一个，你可以这样做:
<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可能会操作属性。
这在CSS2.1中是不可行的，但在CSS3属性子字符串匹配选择器(在IE7+中支持)中是可能的:
div[class^="status-"], div[class*=" status-"]
注意第二个属性选择器中的空格字符。这将挑选class属性满足以下条件之一的div元素:
[class^="status-"] -以"status-"开头 [class*=" status-"] -包含直接出现在空格字符后面的子字符串"status-"。根据HTML规范，类名由空格分隔，因此为有效空格字符。如果指定了多个类，这将检查第一个类之后的任何其他类，并增加了检查第一个类的奖励，以防属性值被空格填充(一些动态输出类属性的应用程序可能会发生这种情况)。
当然，这在jQuery中也适用，如下所示。
你需要像上面描述的那样组合两个属性选择器的原因是，像[class*="status-"]这样的属性选择器将匹配以下元素，这可能是不可取的:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
如果您可以确保这样的场景永远不会发生，那么为了简单起见，您可以自由地使用这样的选择器。然而，上面的组合要健壮得多。
如果您可以控制生成标记的HTML源代码或应用程序，那么按照Gumbo的建议，将status-前缀作为自己的状态类可能会更简单。
CSS属性选择器将允许您检查字符串的属性。(在本例中为类名)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(看起来它实际上处于2.1和3的“推荐”状态)
以下是我的想法:
[]:是复杂选择器的容器，如果你愿意… Class:在本例中，' Class '是您要查看的属性。 *:修饰符(如果有):在这种情况下-“通配符”表示您正在寻找任何匹配。 Test -:属性-的值(假设有一个)，包含字符串" Test -"(可以是任何东西)
举个例子:
[class*='test-'] {
color: red;
}
如果你有充分的理由，你可以更具体地描述元素
ul[类*=“测试”]> li (...))
我试图找到边缘情况，但我认为没有必要使用^和* -的组合，因为*得到了一切…
例如:http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
IE6以上的所有程序都将愉快地服从。:)
注意:
[类]{…｝
将选择带有类的任何东西…
