Question

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

例如，我想要一个适用于具有以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 来模拟。

469

22

6

3

Answer 1

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

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

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

[class^="status-"]-以“status-”开头

[class*=" status-"]-包含直接出现在空格字符之后的子字符串“status-”。类名由空格per the HTML spec分隔，因此是重要的空格字符。如果指定了多个类，则会检查第一个类之后的任何其他类，和增加了在属性值为空格填充的情况下动态检查第一个类的好处（这可能发生在输出属性

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

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

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

如果您可以确保这样的场景永远不会发生，那么为了简单起见，您可以自由地使用这样的选择器。但是，上面的组合要健壮得多。

如果您可以控制 HTML 源或生成标记的应用程序，那么将status-前缀作为自己的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 {...}

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

example:http://codepen.io/sheriffderek/pen/MaaBwp http://caniuse.com/#feat=css-sel2

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

请注意：

[class] {...}

将选择任何与类...

Answer 3

这对于 CSS 选择器是不可能的。但是您可以使用两个类而不是一个，例如status和important而不是status-important。

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 可以操纵属性。