CSS类选择器通配符[重复]答案

【问题标题】：CSS class selector wildcard [duplicate]CSS类选择器通配符[重复]
【发布时间】：2015-05-02 23:23:45
【问题描述】：

所以我想知道是否有办法在我的 CSS 中添加通配符？

我在button 元素中有几个类是.button-0、.button-1、.button-2、.button-3 等。我想定义所有.button-* 类。

是否可以这样做：

button .button-[=*] {
  margin-right: 2rem;  
}

【问题讨论】：

【解决方案1】：

使用attribute selector：

button [class*="button-"] {
  margin-right: 2rem;  
}

来自MDN：

[attr*=value] - 表示属性名称为 attr 且其值包含至少一次出现的字符串“value”作为子字符串的元素。

button [class*="button-"] {
  color: red;
}

<button>
    <span class="button-0">text</span>
    <span class="button-1">text</span>
    <span class="button-2">text</span>
</button>

作为Chad points out，一个元素完全有可能包含this-is-my-button-class这样的类。在这种情况下，将选择不需要的元素。为了防止这种情况，您可以使用两个选择器的组合：

button [class^="button-"],
button [class*=" button-"] {
  margin-right: 2rem;  
}

选择器button [class^="button-"] 确保以button- 开头的元素将被选中。由于元素的第一个类可能不是以button- 开头，选择器[class*=" button-"]（注意空格）确保它会被选中。

【讨论】：

谢谢，我会试试看！
这会起作用，但是要使用字符串启动选择器，您应该使用^ 选择器，例如button [class^="button-"]。
@Chad ..如果元素有multiple classes 和button- 不是第一类怎么办？在这种情况下，^ 将不起作用。
@JoshCrozier 你可以稍微修改一下，然后做一个双重选择器，比如：div[class^="button-"], div[class*=" button-"]，确保抓住第一个或前面有空格的一个。（我在这里扮演魔鬼的拥护者）
@Chad：这是最万无一失的答案。

【解决方案2】：

你可以这样做

button[id|=button]{
    color:red;
}

id 包含 button 字样的所有按钮都会受到影响。例如http://jsfiddle.net/czp28jpb/

【讨论】：

实际上这是 CSS2 规范，并且不是基于字符串，所以如果他想确定它有一个破折号（就像一个按钮被称为 <button class="btn btn-gray">，这个解决方案不会'不行。