CSS类选择器通配符

Question

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

我有几个班是.button-0,.button-1,.button-2,.button-3,等一个内button元素.我想要.button-*定义所有类.

有可能做这样的事情:

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

Answer 1

使用属性选择器:

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指出的那样,一个元素完全有可能包含一个类,如this-is-my-button-class.在这种情况下,将选择不期望的元素.为了防止这种情况,您可以使用两个选择器的组合:

这里的例子

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

选择器button [class^="button-"]确保在开始时选择元素button-.由于元素的第一个类可能不以button-,因此选择器[class*=" button-"](注意空白)确保它将被选中.