CSS 中的通配符 * 用于类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5110249/
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
wildcard * in CSS for classes
提问by twitter
I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1.
我有这些 div，我用它来设计样式.tocolor，但我还需要唯一标识符 1,2,3,4 等，所以我将它添加为另一个类tocolor-1。
<div class="tocolor tocolor-1"> tocolor 1 </div>
<div class="tocolor tocolor-2"> tocolor 2 </div>
<div class="tocolor tocolor-3"> tocolor 3 </div>
<div class="tocolor tocolor-4"> tocolor 4 </div>
.tocolor{
background: red;
}
Is there a way to have just 1 class tocolor-*. I tried using a wildcard *as in this css, but it didn't work.
有没有办法只有 1 个班级tocolor-*。我尝试*在这个 css 中使用通配符，但没有用。
.tocolor-*{
background: red;
}
回答by Sotiris
What you need is called attribute selector. An example, using your html structure, is the following:
您需要的是属性选择器。使用您的 html 结构的示例如下：
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
In the place of divyou can add any element or remove it altogether, and in the place of classyou can add any attribute of the specified element.
在这个地方div，你可以添加任何元素或干脆删除它，在这个地方class，你可以添加指定元素的任何属性。
[class^="tocolor-"]— starts with "tocolor-".[class*=" tocolor-"]— contains the substring "tocolor-" occurring directly after a space character.
[class^="tocolor-"]— 以“tocolor-”开头。[class*=" tocolor-"]— 包含直接出现在空格字符之后的子字符串“tocolor-”。
Demo:http://jsfiddle.net/K3693/1/
演示：http : //jsfiddle.net/K3693/1/
More information on CSS attribute selectors, you can find hereand here. And from MDN Docs MDN Docs
回答by thomas.han
Yes you can this.
是的，你可以这样做。
*[id^='term-']{
[css here]
}
This will select all ids that start with 'term-'.
这将选择所有以'term-'.
As for the reason for not doing this, I see where it would be preferable to select this way; as for style, I wouldn't do it myself, but it's possible.
至于不这样做的原因，我看哪里最好选择这种方式；至于风格，我不会自己做，但这是可能的。
回答by adroitec
An alternative solution:
另一种解决方案：
div[class|='tocolor']will match for values of the "class" attribute that begin with "tocolor-", including "tocolor-1", "tocolor-2", etc.
div[class|='tocolor']将匹配以“tocolor-”开头的“class”属性的值，包括“tocolor-1”、“tocolor-2”等。
Beware that this won't match
请注意，这不匹配
<div class="foo tocolor-">
Reference: https://www.w3.org/TR/css3-selectors/#attribute-representation
参考：https: //www.w3.org/TR/css3-selectors/#attribute-representation
[att|=val]Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D)
[att|=val]表示具有 att 属性的元素，其值要么正好是“val”，要么以“val”开头，后跟“-”（U+002D）
回答by DKSan
If you don't need the unique identifier for further styling of the divs and are using HTML5 you could try and go with custom Data Attributes. Read on hereor try a google search for HTML5 Custom Data Attributes
如果您不需要唯一标识符来进一步设置 div 样式并且正在使用 HTML5，您可以尝试使用自定义数据属性。在这里阅读或尝试谷歌搜索HTML5 Custom Data Attributes
