html - 任何属性的 '.' 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，则无需担心)，属性选择器和类选择器同样具有特异性。