通配符 * 在 CSS 中用于类

问题描述

我有这些 div，我用 .tocolor 设置样式，但我还需要唯一标识符 1、2、3、4 等，所以我将其添加为另一个类 .

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

有没有办法只使用 1 个类 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 属性选择器的信息，你可以找到 这里 和 这里.来自 MDN 文档 MDN 文档

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

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