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

问题描述

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

例如我想要一个规则，该规则将适用于具有以 status- 开头的类(A 和 C，但不是以下代码段中的 B):

</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-"开头

• [class*=" status-"] — 包含直接出现在空格字符之后的子字符串status-".类名由空格分隔 根据 HTML 规范，因此重要的空格特点.如果指定了多个类，这会检查第一个类之后的任何其他类，并且会在属性值是空格填充的情况下添加检查第一个类的奖励(这可能发生在某些输出 class 属性动态).

当然，这也适用于 jQuery，如演示 这里开始.

你需要如上所述组合两个属性选择器的原因是因为像[class*="status-"]这样的属性选择器会匹配以下元素，这可能是不可取的:

如果您可以确保这种情况永远不会发生，那么为了简单起见，您可以随意使用这样的选择器.但是，上述组合要健壮得多.

如果您可以控制 HTML 源代码或生成标记的应用程序，只需将 status- 作为其自己的 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-"

• [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屋！