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

【问题标题】：Apply CSS to a group of css classes containing col- substring将 CSS 应用于一组包含 col-substring 的 css 类
【发布时间】：2014-04-25 21:45:58
【问题描述】：

我不确定最好的表达方式，这可能是我努力研究它的原因，尽管它可能很简单。

我想要做的是将 CSS 应用到一组类。

例如，我有 .col-1、.col-2、.col-3、.col-4 等课程

我想要做的是制作一些 css，可以说可能会使用文本 col- 更改所有类的边框颜色，因此我不必将其应用于每个单独的数字。

我确定我以前见过这个，但不知道该怎么做。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

你可以使用

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>

请查看以下链接

https://www.w3schools.com/cssref/sel_attr_contain.asp

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain

【讨论】：

【解决方案2】：

您可以使用[class*="col-"] CSS attribute selector 选择任何包含至少一次col- 作为其class 值的元素。

[class*="col-"] {
    border-color: red;
}

如果class 属性的所有值都以col- 开头，则可以使用[class^="col-"] 选择器。

但是，为了防止像foo-col-1 这样的类被选中，您可以使用上述两个选择器的组合，如下所示（感谢@JosephSpens）：

[class^="col-"], [class*=" col-"] {
  border-color: red;
}

WORKING DEMO.

【讨论】：

[class^=col-] 如果它们都以 col 开头可能更合适（虽然从 Q 中不是很清楚）
为了避免像.span-col-1 这样的非预期类的样式，您可以使用[class^="col-"], [class*=" col-"]。
响应您所做的关于class 的值是否以选择器开头的最后编辑...假设任何给定的类将成为元素类列表中的第一个是不好的做法.
是的，这就是我要找的那个！
@JosephSpens 感谢您的建议。添加到答案中。