CSS中的通配符*用于类

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

#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

#2楼

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

#3楼

是的，你可以这样。

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

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

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

#4楼

替代解决方案：

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）

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3151111

标签

css

通配符

css样式