CSS类选择器通配符

Question

所以我想知道是否有办法将通配符放入我的CSS？

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

是否可以执行以下操作：

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

Answer 1

使用attribute selector：

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

Example Here

---

来自MDN：

  

[attr*=value] - 表示属性名称为attr的元素，其值至少包含一次字符串＆＃34; value＆＃34; as substring。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Example Here

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

选择器button [class^="button-"]确保如果元素以button-开头，则会选择该元素。由于元素的第一堂课可能不以button-开头，因此选择器[class*=" button-"]（注意空格）确保它将被选中。

Answer 2

你可以这样做

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

其ID包含按钮一词的所有按钮都会受到影响。例如http://jsfiddle.net/czp28jpb/