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

Question

我不确定说出这个的最佳方式,这可能就是为什么我很难研究它,尽管它可能很简单.

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

比如我有课 .col-1, .col-2, .col-3, .col-4

我想要做的是制作一些css,可以说可能会改变所有类的文本的边框颜色,col-所以我不必将它应用于每个单独的数字.

我相信我以前见过这个,但想不出怎么做.

Answer 1

您可以使用[class*="col-"] CSS属性选择器来选择包含至少一个出现的任何元素col-作为其class值.

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

如果class属性的所有值都以col-,则可以使用[class^="col-"]selector.

但是,为了防止选择类foo-col-1,可以使用以下两个选择器的组合(感谢@JosephSpens):

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

工作演示.