Question

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

E.g。我想要一个适用于以类status-开头的div的规则（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]和div[class~=status-]

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

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

Answer 1

CSS2.1无法实现，但CSS3属性子串匹配选择器（IE7 +中支持）是可能的：

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

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

[class^="status-"] - 以“status - ”
[class*=" status-"] - 包含直接在空格字符后面出现的子字符串“status-”。类名由空格per the HTML spec分隔，因此具有重要的空格特征。如果指定了多个类，则在第一个之后检查任何其他类，和添加检查第一个类的奖励，以防属性值被空格填充（某些应用程序输出{{ 1}}动态属性。

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

如上所述，您需要组合两个属性选择器的原因是因为class之类的属性选择器将匹配以下元素，这可能是不合需要的：

[class*="status-"]

如果您可以确保这种情况从不发生，那么为了简单起见，您可以自由地使用这样的选择器。但是，上面的组合要强得多。

如果您可以控制HTML源代码或生成标记的应用程序，那么只需将<div id='D' class='foo-class foo-status-bar bar-class'></div>前缀设为自己的status-类而不是as Gumbo suggests，就可能更简单。

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选择器无法做到这一点。但你可以使用两个类而不是一个，例如状态和重要而不是状态重要。

Answer 4

你不能这样做。有一个attribute selector在 - 符号之前完全或部分匹配，但由于您有多个属性，因此无法在此处使用。如果您要查找的班级名称始终是第一名，您可以这样做：

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

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

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

4 个答案: