Question

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

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; }。我尝试使用这个css中的通配符tocolor-*，但它没有用。

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属性选择器的更多信息，您可以找到here和here。来自MDN Docs MDN Docs

Answer 2

是的，你可以这样做。

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

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

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

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，您可以尝试使用自定义数据属性。请继续阅读here或尝试谷歌搜索HTML5 Custom Data Attributes

CSS中的通配符*用于类

4 个答案: