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

Question

我有这些 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 个类 tocolor-*.我尝试像在这个 css 中一样使用通配符 *，但它没有用。

.tocolor-*{
  background: red;
}

Answer 1

你需要的是属性选择器。下面是一个使用您的 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