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


Is there a CSS selector by class prefix?

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

例如。 我想要一条适用于div以status-开头的类(A和C，但以下代码段中不包含B)的规则：

1
 

某种组合：
div[class|=status]和div[class~=status-]

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

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

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

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

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

  • [class^="status-"] —以" status-"开头

  • [class*=" status-"] —包含直接在空格字符后出现的子字符串" status-"。根据HTML规范，类名称由空格分隔，因此是有效的空格字符。如果指定了多个类，这将在第一个类之后检查其他任何类，并增加了检查第一个类的好处，以防属性值被空格填充(某些动态输出class属性的应用程序可能会发生这种情况)。

当然，这也适用于jQuery，如此处所示。

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

1
 

如果可以确保永远不会发生这种情况，那么为简单起见，您可以自由使用此类选择器。但是，上述组合更加健壮。

如果您可以控制HTML源代码或生成标记的应用程序，则可以像Gumbo建议的那样，将status-前缀设为自己的status类可能更简单。

相关讨论

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

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

这是我*如何工作的概述：

  • [ ]：是复杂选择器的容器，如果您要...
  • class："类"是在这种情况下要查看的属性。
  • *：修饰符(如果有)：在这种情况下-"通配符"表示您正在寻找任何匹配项。
  • test-：属性的值(假设有一个)-包含字符串" test-"(可以是任意值)

因此，例如：

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

如果您有充分的理由，也可以更具体一些

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

我尝试查找边缘情况，但我认为不需要使用^和*的组合-因为*可以获取所有内容...

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

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

高于IE6的一切都将愉快地服从。 :)

注意：

[class] { ... }

会选择一个班级的任何东西...

相关讨论

CSS选择器无法做到这一点。但是您可以使用两个类而不是一个类，例如地位和重要，而不是地位重要。

相关讨论

您不能这样做。有一个属性选择器可以完全匹配或部分匹配，直到-号为止，但由于您有多个属性，因此在这里不起作用。如果您要查找的类名始终是第一个，则可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
Test Page
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
A
B
C

</body>
</html>

请注意，这只是指出哪个CSS属性选择器是最接近的，不建议您假设类名始终在最前面，因为javascript可以操纵属性。

相关讨论