将 CSS 应用于一组包含 col-substring 的 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22509402/
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
Apply CSS to a group of css classes containing col- substring
提问by Suzi Larsen
I wasn't sure of the best way to word this and that's probably why I have struggled to research it even though it is probably simple.
我不确定表达这个的最佳方式，这可能就是为什么我一直在努力研究它，即使它可能很简单。
What I want to do is a apply CSS to a group of classes.
我想做的是将 CSS 应用于一组类。
For example I have the classes .col-1, .col-2, .col-3, .col-4
例如，我有类 .col-1, .col-2, .col-3, .col-4
What I want to be able to do is make some css that can say maybe change the border color for all classes with the text col-so I don't have to apply it to each individual number.
我希望能够做的是制作一些 css，可以说可能会更改所有带有文本的类的边框颜色，col-因此我不必将其应用于每个单独的数字。
I'm sure I've seen this before but cannot think how to do it.
我确定我以前见过这个，但想不出怎么做。
回答by Hashem Qolami
You could use [class*="col-"]CSS attribute selectorto select any element contains at least one occurrence of col-as its classvalue.
您可以使用[class*="col-"]CSS 属性选择器来选择包含至少一个匹配项col-作为其class值的任何元素。
[class*="col-"] {
border-color: red;
}
If all values of classattributes begin with col-, you could use [class^="col-"]selector.
如果class属性的所有值都以开头col-，则可以使用[class^="col-"]选择器。
However, in order to prevent for classes like foo-col-1to be selected, you could use a combination of two above selectors as follows (Thanks to @JosephSpens):
但是，为了防止foo-col-1选择类似的类，您可以使用上述两个选择器的组合，如下所示（感谢@JosephSpens）：
[class^="col-"], [class*=" col-"] {
border-color: red;
}
工作演示。
回答by Arshad Syed
You can use
您可以使用
CSS [attribute*=value] selector
CSS [属性*=值] 选择器
<style>
div[class*=col-]{
color: green;
}
</style>
<body>
<div class="col-4">
<p>this is an example one</p>
<div>
<div class="test">
<p>this is an example one</p>
<div>
<div class="col-8">
<p>this is an example three</p>
<div>
</body>
Please check below link
请检查以下链接
https://www.w3schools.com/cssref/sel_attr_contain.asp
https://www.w3schools.com/cssref/sel_attr_contain.asp
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain
