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

Question

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

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

例如，我有类 .col-1、.col-2、.col-3、.col -4

我想做的是制作一些 css，可以说可能会用文本 col- 更改所有类的边框颜色，这样我就不必将它应用于每个人数。

我确定我以前见过这个，但想不出怎么做。

Answer 1

你可以使用[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 .