将CSS应用于一组包含col-substring的CSS类_Css_Css Selectors

将CSS应用于一组包含col-substring的CSS类

css

将CSS应用于一组包含col-substring的CSS类,css,css-selectors,Css,Css Selectors,我不确定这个词的最佳表达方式，这可能就是为什么我一直在努力研究它，尽管它可能很简单我想做的是将CSS应用于一组类例如，我有类.col-1，.col-2，.col-3，.col-4 我想做的是制作一些css，可以说可能会改变所有类的边框颜色，并使用文本col-，这样我就不必将它应用于每个单独的数字我确信我以前见过这种情况，但想不出怎么做。您可以使用[class*=“col-”]来选择任何元素，该元素至少包含一个col-作为其类值 [class*=“col-”]{ 边框颜色：红色； } 如果

我不确定这个词的最佳表达方式，这可能就是为什么我一直在努力研究它，尽管它可能很简单

我想做的是将CSS应用于一组类

例如，我有类

.col-1

，

.col-2

，

.col-3

，

.col-4

我想做的是制作一些css，可以说可能会改变所有类的边框颜色，并使用文本

col-

，这样我就不必将它应用于每个单独的数字

我确信我以前见过这种情况，但想不出怎么做。

您可以使用

[class*=“col-”]

来选择任何元素，该元素至少包含一个

col-

作为其

类

值

[class*=“col-”]{
边框颜色：红色；
}

如果

class

属性的所有值都以

col-

开头，则可以使用

[class^=“col-”]

选择器

但是，为了防止选择像

foo-col-1

这样的类，您可以使用上述两个选择器的组合，如下所示（感谢）：

[class^=“col-”]，[class*=“col-”]{
边框颜色：红色；
}

您可以使用

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>


div[class*=col-]{
颜色：绿色；
}
这是一个例子
这是一个例子
这是第三个例子

请查看下面的链接

[class^=col-]

如果它们都以col开头（虽然从Q开始不是很清楚），则可能更合适，以避免设置像

这样的意外类的样式。span-col-1

，您可以执行

[class^=“col-”，[class*=“col-”]

。对于上次编辑的

class

的值是否以选择器开头做出响应。。。假设任何给定的类都将是元素的类列表中的第一个类是不好的做法。是的，这就是我要找的那个@谢谢你的建议。补充到答案中。