是否有按类前缀的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3338680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS selector by class prefix?
提问by THX-1138
I want to apply a CSS rule to any element whose one of the classes matches specified prefix.
我想将 CSS 规则应用于其中一个类与指定前缀匹配的任何元素。
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):
例如，我想要一个规则，该规则将适用于具有以status-（A 和 C，但不是以下代码段中的 B）开头的类的 div ：
<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-]
某种组合：div[class|=status]和div[class~=status-]
Is it doable under CSS 2.1? Is it doable under any CSS spec?
它在 CSS 2.1 下可行吗？在任何 CSS 规范下都可行吗？
Note: I do know I can use jQuery to emulate that.
注意：我知道我可以使用 jQuery 来模拟它。
回答by BoltClock
It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which aresupported in IE7+):
这不是可行的与CSS2.1，但它有可能与CSS3属性字符串匹配选择（这是在IE7 +支持）：
div[class^="status-"], div[class*=" status-"]
Notice the space character in the second attribute selector. This picks up divelements whose classattribute meets either of these conditions:
注意第二个属性选择器中的空格字符。这将选取div其class属性满足以下任一条件的元素：
[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, andadds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that outputclassattributes dynamically).
[class^="status-"]— 以“状态-”开头[class*=" status-"]— 包含直接出现在空格字符之后的子字符串“status-”。根据 HTML 规范，类名由空格分隔，因此是重要的空格字符。如果指定了多个类，这会在第一个类之后检查任何其他类，并在属性值是空格填充的情况下添加检查第一个类的奖励（这可能发生在一些class动态输出属性的应用程序中）。
Naturally, this also works in jQuery, as demonstrated here.
当然，这也能在jQuery的，这表现在这里。
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:
您需要如上所述组合两个属性选择器的原因是，诸如此类的属性选择器[class*="status-"]将匹配以下元素，这可能是不可取的：
<div id='D' class='foo-class foo-status-bar bar-class'></div>
If you can ensure that such a scenario will neverhappen, 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 statusclass instead as Gumbo suggests.
如果您可以控制 HTML 源代码或生成标记的应用程序，那么将status-前缀设为自己的status类可能会更简单，而不是像 Gumbo 建议的那样。
回答by sheriffderek
CSS Attribute selectors will allow you to check attributes for a string. (in this case - a class-name)
CSS 属性选择器将允许您检查字符串的属性。（在这种情况下 - 一个类名）
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(looks like it's actually at 'recommendation' status for 2.1 and 3)
（看起来它实际上处于 2.1 和 3 的“推荐”状态）
Here's an outline of how I *think it works:
这是我*认为它是如何工作的概述：
[ ]: is the container for complex selectors if you will...class: 'class' is the attributeyou are looking at in this case.*: modifier(if any): in this case - "wildcard" indicates you're looking for ANY match.test-: the value (assuming there is one) of the attribute - that contains the string "test-" (which could be anything)
[ ]: 是复杂选择器的容器，如果你愿意的话...class: 'class' 是您在这种情况下查看的属性。*：修饰符（如果有）：在这种情况下 - “通配符”表示您正在寻找任何匹配项。test-：属性的值（假设有一个） - 包含字符串“test-”（可以是任何东西）
So, for example:
因此，例如：
[class*='test-'] {
color: red;
}
You could be more specific if you have good reason, with the element too
如果你有充分的理由，你可以更具体，元素也是
ul[class*='test-'] > li { ... }
ul[class*='test-'] > li { ... }
I've tried to find edge cases, but I see no need to use a combination of ^and *- as * gets everything...
我一直试图找到边缘情况，但我认为没有必要使用的组合^和*-为*得到的一切......
example: http://codepen.io/sheriffderek/pen/MaaBwp
示例：http: //codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
http://caniuse.com/#feat=css-sel2
Everything above IE6 will happily obey. : )
IE6 以上的一切都会愉快地服从。:)
note that:
注意：
[class] { ... }
[class] { ... }
Will select anything with a class...
将选择任何与类...
回答by Gumbo
This is not possible with CSS selectors. But you could use two classes instead of one, e.g. statusand importantinstead of status-important.
这对于 CSS 选择器是不可能的。但是您可以使用两个类而不是一个类，例如status和important而不是status-important。
回答by SBUJOLD
You can't do this no. There is one attribute selectorthat matches exactly or partial until a - sign, but it wouldn't work here because you have multiple attributes. If the class name you are looking for would always be first, you could do this:
你不能这样做不。有一个属性选择器在 - 符号之前完全匹配或部分匹配，但它在这里不起作用，因为您有多个属性。如果您要查找的班级名称始终排在第一位，您可以这样做：
<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>
Note that this is just to point out which CSS attribute selector is the closest, it is not recommended to assume class names will always be in front since javascript could manipulate the attribute.
请注意，这只是为了指出哪个 CSS 属性选择器最接近，不建议假设类名总是在前面，因为 javascript 可以操纵该属性。
