是否有类前缀的CSS选择器？

Question

我想将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来模拟它.

Answer 1

它不适用于CSS2.1,但它可以使用CSS3属性子串匹配选择器(在IE7 + 中受支持):

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

注意第二个属性选择器中的空格字符.这将获取div其class属性满足以下任一条件的元素:

• [class^="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建议的那样.

Answer 2

CSS属性选择器将允许您检查字符串的属性.(在这种情况下 - 一个类名)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(看起来它实际上处于2.1和3的'推荐'状态)

这是我认为它如何工作的概述:

• [ ]:如果你愿意,它是复杂选择器的容器......
• class:'class'是您在这种情况下看到的属性.
• * :修饰符(如果有):在这种情况下 - "通配符"表示您正在寻找任何匹配.
• test- :属性的值(假设有一个) - 包含字符串"test-"(可以是任何东西)

所以,例如:

[class*='test-'] {
  color: red;
}

如果你有充分的理由,你可以更具体,也可以使用元素

ul[class*='test-'] > li { ... }

我试图找到边缘情况,但我认为没有必要使用^和*- 作为*得到一切的组合......

例如:http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6以上的一切都会愉快地服从.:)

注意:

[class] { ... }

会选择任何类别的东西......

Answer 3

CSS选择器无法实现这一点.但是你可以使用两个类而不是一个类,例如status和important而不是status-important.