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

问题描述

我有这些div，我用 .tocolor ，但我还需要唯一标识符1,2,3,4等样式，所以我添加它作为另一个类 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中使用通配符 * ，但它不工作。

  .tocolor  -  * {
 background：red; 
} 
  

解决方案

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

  div [class ^ =tocolor-]，div [class * =tocolor-] {
 color：red 
} 
  

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

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

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

演示： http：// jsfiddle。 net / K3693 / 1 /

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

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;
}

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;
}

解决方案

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

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

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-"] — starts with "tocolor-".
[class*=" tocolor-"] — contains the substring "tocolor-" occurring directly after a space character.

Demo: http://jsfiddle.net/K3693/1/

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

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