CSS中的通配符*用于类

668

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

css css-selectors wildcard

— 推特
source

1

这是关于选择器的CSS3官方网站：w3.org/TR/css3-selectors和兼容性列表：findmebyip.com/litmus

— GarfieldKlon

1215

您需要的称为属性选择器。使用您的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

— 索蒂里斯
source

2

很酷的信息。唯一需要注意的是，如果性能是一个问题，大多数CSS linter都会拒绝类似于正则表达式的属性选择器（例如，使用“ *”），b / c性能较慢。除了使用预处理器（例如Sass）之外，还有其他可行的方法吗？

— CodeFinity 2014年

2

有没有一种方法可以检查class属性是否包含多个子字符串？也许像div[class*="foo"][class="bar"]？

— 康纳

我们的“包含”示例中的空间是非常致命的。从我所看到的，它不应该在那里，对吗？

— 托马斯

1

@Thomas这是确保class="foo tocolor-red"比赛所需的，但不是class="foo fromtocolor-red-blue"

— aleclarson

谢谢你我使用这种技术已有几年了，但从未意识到class ^ =仅适用于HTML类条目的开头。我认为它适用于为HTML标签定义的所有类名称。

— BevansDesign

108

是的，您可以这样做。

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

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

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

— 托马斯汉
source

感谢您提供此ID基础的附录，而不仅仅是class。

— 纳姆

26

替代解决方案：

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

当心，这将不匹配

<div class="foo tocolor-">

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

[att|=val]

表示一个具有att属性的元素，其值要么完全是“ val”，要么以“ val”开头，后跟“-”（U + 002D）

— 阿德力替
source

12

如果class属性以其他不以开头的类开头，则此方法无效tocolor。

— BoltClock

1

这在Qt的小部件styleSheets中也很漂亮。例如，要将样式应用于所有名为的标签foo*，您需要QLabel[objectName|='foo'] { ... }

— 恢复Monica

如@BoltClock所说，如果元素具有多个类并且它们不是以OP正在寻找的类开头，则此解决方案将中断。

— Dan Dascalescu

在Chrome 78中不起作用，但*和^可以工作。

— Gordon Mohrin

3

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

— DKSan
source