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

有没有办法只有一个班级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属性选择器的更多信息,您可以在此处和此处找到.并从MDN Docs MDN Docs

Answer 2

是的,你可以这样.

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

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

至于不这样做的原因,我看到选择这种方式最好的地方; 至于风格,我不会自己做,但它是可能的.

Answer 3

替代解决方案:

div[class|='tocolor'] 将匹配以"tocolor-"开头的"class"属性的值,包括"tocolor-1","tocolor-2"等.

请注意,这与`不匹配

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

[att|=val]

表示具有att属性的元素,其值正好是"val"或以"val"开头,后跟" - "(U + 002D)

Answer 4

如果您不需要唯一标识符来进一步设置 div 样式并且使用 HTML5，您可以尝试使用自定义数据属性。在这里阅读或尝试使用谷歌搜索HTML5 Custom Data Attributes