CSS class 选择器通配符

Question

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

我在 button 元素中有几个类，它们是 .button-0、.button-1、.button-2、.button-3 等。我想得到所有的 .button-* 类来定义。

是否可以这样做：

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

Answer 1

使用 attribute selector:

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

Example Here

来自 MDN:

[attr*=value] - Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

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>

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

Example Here

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

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

Answer 2

你可以这样做

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

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

CSS class 选择器通配符

CSS class selector wildcard

css

css-selectors