我想将CSS规则应用于其类之一与指定前缀匹配的任何元素。
例如，我想要一个规则，该规则将适用于以status-（A和C，但以下代码段中不包含B）开头的类的div ：
status-
<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-]
div[class|=status]
div[class~=status-]
在CSS 2.1下可以使用吗？它可以在任何CSS规范下执行吗？
注意：我知道我可以使用jQuery来模拟。
这不是可行的与CSS2.1，但它有可能与CSS3属性字符串匹配选择（这 是 在IE7 +支持）：
div[class^="status-"], div[class*=" status-"]
注意第二个属性选择器中的空格字符。这将选择div其class属性满足以下任一条件的元素：
div
class
[class^="status-"] —以“ status-”开头
[class^="status-"]
[class*=" status-"]—包含直接在空格字符后出现的子字符串“status-”。根据HTML规范，类名称由空格分隔，因此是有效的空格字符。如果指定了多个类，这将在第一个类之后检查其他任何类，_并_增加了检查第一个类的好处，以防属性值被空格填充（某些class动态输出属性的应用程序可能会发生这种情况）。
[class*=" status-"]
如上所述，您需要组合两个属性选择器的原因是因为诸如这样的属性选择器[class*="status-"]将匹配以下元素，这可能是不希望的：
[class*="status-"]
<div id='D' class='foo-class foo-status-bar bar-class'></div>
如果您可以确保 永远不会发生这种情况，那么为简单起见，您可以自由使用这样的选择器。但是，上面的组合更加健壮。
如果您可以控制HTML源代码或生成标记的应用程序，则可以简单地将status-前缀设为自己的status类，而不是像Gumbo建议的那样。
status
