通配符*在CSS中的类 [英] wildcard * in CSS for classes

问题描述

我有这些div，我用 .tocolor ，但我还需要唯一标识符1,2,3,4等样式，所以我添加它作为另一个类 tocolor-1 。

I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

有一种方法只有一个类 tocolor - * 。我尝试在这个css中使用通配符 * ，但它不工作。

Is there a way to have just 1 class tocolor-*. I tried using a wildcard * as in this css, but it didn't work.

.tocolor-*{
  background: red;
}

推荐答案

选择器。使用您的html结构的示例如下：

What you need is called attribute selector. An example, using your html structure, is the following:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

div 的位置，您可以添加任何元素或完全删除它，而在 class 指定元素的属性。

In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.

[class ^ =tocolor-] - 以tocolor-开头。

[class * = tocolor-] - 包含直接位于空格字符后面的子串tocolor-。

[class^="tocolor-"] — starts with "tocolor-".
[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.

演示： http://jsfiddle.net/K3693/1/

有关CSS属性选择器的更多信息，您可以在此找到此处和此处。

More information on CSS attribute selectors, you can find here and here.

这篇关于通配符*在CSS中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！