html-css中的*通配符,CSS中的通配符*用于类

我有这些div，我正在使用.tocolor ，但我还需要唯一标识符1,2,3,4等，所以我将它添加为另一个类tocolor-1 。

tocolor 1

tocolor 2

tocolor 3

tocolor 4

.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-”。

有关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”等。

请注意，这与`不匹配

[att|=val]

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