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

有没有办法只上一堂课tocolor-*。我尝试使用通配符*就像在这个CSS中一样，但它不起作用。

.tocolor-*{
  background: red;
}

您需要的是所谓的属性选择器。使用您的 html 结构的示例如下：

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

代替div您可以添加任何元素或完全删除它，并代替class您可以添加指定元素的任何属性。

[class^="tocolor-"]— 以“tocolor-”开头。
[class*=" tocolor-"]— 包含直接出现在空格字符之后的子字符串“tocolor-”。

Demo: http://jsfiddle.net/K3693/1/ http://jsfiddle.net/K3693/1/

有关 CSS 属性选择器的更多信息，您可以找到here http://reference.sitepoint.com/css/attributeselector and here http://reference.sitepoint.com/css/css3attributeselectors。 以及来自 MDN 文档MDN Docs https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors