有没有按类前缀的 CSS 选择器？

我想将 CSS 规则应用于其中一个类与指定前缀匹配的任何元素。

例如。我想要一个适用于具有以以下开头的类的 div 的规则status-（以下片段中的 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] and div[class~=status-]

在 CSS 2.1 下可行吗？它在任何 CSS 规范下都可行吗？

注意：我知道我可以使用 jQuery 来模拟它。

这对于 CSS2.1 来说是不可能的，但是对于 CSS3 属性子字符串匹配选择器来说是可能的（其中areIE7+ 支持）：

div[class^="status-"], div[class*=" status-"]

请注意第二个属性选择器中的空格字符。这拾起div其元素class属性满足以下任一条件：

• [class^="status-"]— 以“状态-”开头

• [class*=" status-"]— 包含直接出现在空格字符之后的子字符串“status-”。类名之间用空格分隔根据 HTML 规范，因此具有重要的空间特征。如果指定了多个类，这将检查第一个类之后的任何其他类，and增加了检查第一个类的好处，以防属性值用空格填充（这可能发生在某些输出的应用程序中）class动态属性）。

当然，这也适用于 jQuery，如所示here.

如上所述，您需要组合两个属性选择器的原因是因为诸如[class*="status-"]将匹配以下元素，这可能是不需要的：

<div id='D' class='foo-class foo-status-bar bar-class'></div>

如果你能保证这样的场景会发生never如果发生这种情况，那么为了简单起见，您可以随意使用这样的选择器。然而，上面的组合更加稳健。

如果您可以控制 HTML 源或生成标记的应用程序，则只需制作status-自己的前缀status类代替正如冈博建议的那样.