CSS 中的通配符 * 用于类

.tocolor样式化了这些 div，但是我还需要唯一的标识符 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 属性选择器的更多信息，可以在此处和此处找到。以及来自 MDN Docs 的MDN Docs

是的，您可以这样做。

*[id^='term-']{
    [css here]
}

这将选择所有以'term-'开头的 ID。

至于不这样做的原因，我知道最好选择这种方式。至于风格，我自己不会做，但是有可能。

替代解决方案：

div[class|='tocolor']将匹配以 “tocolor-” 开头的 “class” 属性的值，包括 “tocolor-1”，“tocolor-2” 等。

当心，这将不匹配

<div class="foo tocolor-">

参考： https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]
表示一个具有 att 属性的元素，其值要么完全是 “val”，要么以 “val” 开头，紧随其后的是 “-”（U + 002D）