什么是“。” CSS选择器的任何属性？

Question

我想选择与选择类类似的东西（但我想使用其他属性）。可以同时使用class='item-button item-button-selected'和.item-button选择.item-button-selected。

Answer 1

与任何属性的HTML类选择器等效的是[attribute~=value]，它与一组用空格分隔的值匹配：

[data-foo~="a"] {
  color: red;
}

[data-foo~="a"][data-foo~="b"] {
  color: blue;
}

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

如果您担心特定性（如果这是non-CSS use case，则不必担心），属性选择器和类选择器是同样特定的。