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