CSS中的通配符\*用于类

CSS

神奇樱Eva

2020-03-16

我有我正在使用的这些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;
}

第1826篇《CSS中的通配符\*用于类》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
小宇宙阳光 2020.03.16

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

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

div可以代替或添加任何元素，class也可以将指定元素的任何属性代替。

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

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

有关CSS属性选择器的更多信息，可以在此处和此处找到。并且来自MDN文档MDN文档

Davaid西门 2020.03.16

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android