将CSS应用于包含子串的一组css类 [英] Apply CSS to a group of css classes containing col- substring

问题描述

我不确定这个词的最佳方式，这可能是为什么我努力研究它，即使它可能很简单。

我想要什么

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

我想要做的是做一些CSS，可以说可以改变所有类的边框颜色与文本 col - ，所以我不必将它应用到每个单独的数字。

我相信我以前看过这个，

解决方案

您可以使用 [class * =col-] CSS属性选择器可选择任何元素，其中至少包含一个发生 col - 作为类值。

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

如果 class 属性以 col - 开头，您可以使用 [class ^ =col - ] p>

但是，为了防止选择 foo-col-1 的类，您可以使用两个以上的选择器如下（感谢 @JosephSpens ）：

  [class ^ =col - ]，[class * =col-] {
 border-color：red; 
} 
  

工作演示 。

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.

For example I have the classes .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.

I'm sure I've seen this before but cannot think how to do it.

解决方案

You could use [class*="col-"] CSS attribute selector to select any element contains at least one occurrence of col- as its class value.

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

If all values of class attributes begin with col-, you could use [class^="col-"] selector.

However, in order to prevent for classes like foo-col-1 to be selected, you could use a combination of two above selectors as follows (Thanks to @JosephSpens):

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

WORKING DEMO.

这篇关于将CSS应用于包含子串的一组css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！