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

Question

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

标签： htmlcss-selectors

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

如果您担心特定性（如果这是一个非 CSS 用例，则无需担心），属性选择器和类选择器同样具有特定性。