html - 任何属性的 '.' CSS 选择器等价于什么？

Question

我想选择与选择类类似的东西(但我想使用其他属性)。同样，可以使用 .item-button 和 .item-button-selected 选择 class='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 ，则无需担心)，属性选择器和类选择器同样具有特殊性。