有类前缀的CSS选择器吗？
我想将CSS规则应用于其中一个类匹配指定前缀的任何元素。
例如，我想要一个规则，将适用于具有以状态开始的类（A和C，但不在下面的代码段中）：
<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-”开头（显然）。 -
[class*=" status-"]– 包含紧跟在空格字符后面的子字符串“status-”。 类名由每个HTML规范的空格分隔，因此具有显着的空间特性。 如果指定了多个类，则会在第一个类之后检查其他类，如果属性值是空格填充的（可能会出现某些动态输出class属性的应用程序），则会检查第一个类。
当然，这也适用于jQuery，如此处所示。
如上所述需要组合两个属性选择器的原因是因为[class*="status-"]这样的属性选择器将匹配以下元素，这可能是不可取的：
<div id='D' class='foo-class foo-status-bar bar-class'></div>
如果可以确保这种情况永远不会发生，那么为了简单起见，您可以自由使用这样的选择器。 但是，上面的组合更加健壮。
如果您可以控制HTML源代码或生成标记的应用程序，那么可以更简单地将status前缀设置为自己的status类，而不是像Gumbo所建议的那样 。
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] { ... }
将选择一个类的任何东西…
这是不可能的CSS选择器。 但是你可以使用两个类而不是一个类，例如状态和重要，而不是状态重要 。
你不能这样做。 有一个属性选择器完全匹配或部分匹配，直到一个 – 符号，但它不会在这里工作，因为你有多个属性。 如果你正在寻找的类名永远是第一，你可以这样做：
<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可以操作属性。
