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

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

.tocolor-*{background: red;}
643623 次浏览
小开
最佳答案

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

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

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

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

演示：http://jsfiddle.net/K3693/1/

有关CSS属性选择器的更多信息，您可以找到这里和这里。来自MDN DocsMDN文档

小开

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

小开

是的，你可以做到这一点。

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

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

至于不这样做的原因，我知道在哪里选择这种方式更可取；至于风格，我不会自己做，但这是可能的。

小开

替代解决方案：

div[class|='tocolor']将匹配以“tocoly-”开头的“class”属性的值，包括“tocoly-1”、“tocoly-2”等。

当心这不会匹配 

<div class="foo tocolor-">

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

[att|=val]

表示具有att属性的元素，其值可以完全为“val”或以“val”开头，紧跟“-”（U+002D）


提交答案