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 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>.填色{背景:红色；}

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

有没有办法只有 1 个类 tocolor-*.我尝试在这个 css 中使用通配符 *，但它没有用.

.tocolor-*{ background: red; }

推荐答案

你需要的是属性选择器.使用您的 html 结构的示例如下:

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.

在div处你可以添加任何元素或完全删除它，在class处你可以添加指定元素的任何属性.>

[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 属性选择器的更多信息，您可以在此处 和 此处.来自 MDN 文档 MDN 文档

More information on CSS attribute selectors, you can find here and here. And from MDN Docs MDN Docs

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