有类的前缀CSS选择器吗？ [英] Is there a CSS selector by class prefix?

问题描述

我想对其中一个类匹配指定前缀的任何元素应用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来模拟。

解决方案

它不能使用CSS2.1，但可以使用CSS3属性子串匹配选择器（在支持在IE7 +）：

  div [class ^ =status-]，div [class * =status-] 
  

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

• [class ^ =status - ] - 以status- p>




• [class * =status - ] - 包含子串status-空格字符。类名称由whitespace 按HTML规范分隔，因此具有显着的空格字符。如果指定了多个类，这将检查第一个类之后的任何其他类。和在属性值为空格填充的情况下添加检查第一类的奖励（这可能发生在输出 class 动态）。

当然， ，如图所示 here 。

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

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

如果您能确保这种情况从不为了简单起见可以自由使用这样的选择器。

如果您可以控制HTML源代码或生成标记的应用程序，可能会更容易使 status - 前缀自己的状态类作为Gumbo建议。

I want to apply a CSS rule to any element whose one of the classes matches specified prefix.

E.g. I want a rule that will apply to div that has class that starts with status- (A and C, but not B in following snippet):

<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>

Some sort of combination of:
div[class|=status] and div[class~=status-]

Is it doable under CSS 2.1? Is it doable under any CSS spec?

Note: I do know I can use jQuery to emulate that.

解决方案

It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):

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

Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:

• [class^="status-"] — starts with "status-" (obviously).

• [class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Naturally, this also works in jQuery, as demonstrated here.

The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:

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

If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.

If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.

这篇关于有类的前缀CSS选择器吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！