css - CSS 中的通配符 * 用于类

我有这些 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;
}

有没有办法只有 1 个类(class) 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 属性选择器的更多信息，您可以找到 here 和 here 。
来自 MDN 文档 MDN Docs

关于css - CSS 中的通配符 * 用于类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5110249/